javascript - EXTJS 5 - 标记字段或组合框 - 显示和隐藏表单字段

Question

我想根据多选组合框(标记字段)中选择的项目动态显示和隐藏表单中的字段。

组合框中选择的每个项目都有几个关联的隐藏表单字段(待显示)。

这些字段具有属性“hidden:true”；

我可以显示字段，但当我从组合框字段或标记字段中删除项目时无法隐藏它们。

listeners:{ 

    select:function( combo, records, eOpts) {

            var combo = Ext.ComponentQuery.query('#combo')[0];

            var field = Ext.ComponentQuery.query('#A')[0];                      

            var field1 =Ext.ComponentQuery.query('#B')[0];                      

            var field2 =Ext.ComponentQuery.query('#C')[0];


            var records = combo.getValue();

              console.log(records);

            for (var i = 0, count = records.length; i < count; i++) {

                    switch(records[i]) {

                    case 'itemone':

                        if(field.isHidden()) {
                            field.show();                   
                                }
                        else { 
                             field.hide();
                                }
                    break;

                    case 'itemtwo':

                        if(field1.isHidden()) {
                            field1.show();                  
                                }
                        else { 
                             field1.hide();
                                }                                       
                    break;

                    case 'itemthree':

                        if(field2.isHidden()) {
                            field2.show();                  
                                }
                        else { 
                             field2.hide();
                                }       
                    break;  
                } 
            }
        }
}

console.log(records) 提供以下结果:

显示:

["itemone"]

["itemone", "itemtwo" ]

["itemone", "itemtwo", "itemthree"]

隐藏:

["itemone", "itemtwo"]

["itemone"]

请给我纠正代码的建议。

注意:抱歉，之前的下一篇文章发错了地方

我尝试实现您的建议，但没有成功(初学者困难)。

我的代码:

 listeners:{ 

  select:function( combo, records, eOpts) {

    var combo = Ext.ComponentQuery.query('#combo')[0];

    var fields = Ext.ComponentQuery.query('[autoHideTag]');

    var records = combo.getValue();

      console.log(records);

    for (var i = 0, count = records.length; i < count; i++) {

            fields.setVisible(records.indexOf(fields.autoHideTag) !== -1 ); 

            switch(records[i]) {

            case 'itemone':

                if(field.isHidden()) {
                    field.show();                   
                        }
                else { 
                     field.hide();
                        }
            break;

            case 'itemtwo':

                if(field1.isHidden()) {
                    field1.show();                  
                        }
                else { 
                     field1.hide();
                        }                                       
            break;

            case 'itemthree':

                if(field2.isHidden()) {
                    field2.show();                  
                        }
                else { 
                     field2.hide();
                        }       
            break;  
        } 
    }
  }
} 

Firebug 说:

类型错误:fields.setVisible 不是函数

请您帮忙提供更多建议。

谢谢。

Answer 1

确实，您的代码存在逻辑缺陷。您使所有字段可见，但是当您删除第三个标签时，会发生什么？您循环组合中当前选定的标签，正如您所显示的，您有 ["itemone", "itemtwo"]，其中没有“item Three”。所以你的最后一种情况，可以隐藏第三个字段的情况是注释执行的。第二个和第一个标签依此类推。

我要做的是循环遍历每个字段，如果选择了标签则显示它，如果没有选择则隐藏它。例如，您可以使用 records.indexOf('itemone') !== -1 来测试标签是否被选中。

另一个技巧，我将使用一个具有独特字段名称的自定义属性，这样既可以简化组件查询，又可以无意识地知道标签以针对所选标签进行测试。

这就是我的意思...如果您这样定义字段:

{
    xtype: 'textfield'
    ,autoHideTag: 'itemone' // custom marker
}

您可以在一个查询中获取所有字段:

// select all components with property autoHideTag resolving to something truthy
var fields = Ext.ComponentQuery.query('[autoHideTag]');

如果需要并且适用的话，您可以使查询更加具体，例如“textfield[autoHideTag]”或“field[autoHideTag]”。

最后，您将知道要测试该字段的标签:

// setting a component visible or hidden when it is already the case has no side-effect
field.setVisible( records.indexOf(field.autoHideTag) !== -1 );

瞧。祝 Ext 玩得开心!