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

Javascript EXTJS 5-标记字段或组合框-显示和显示;隐藏表单字段,javascript,combobox,hide,show,extjs5,Javascript,Combobox,Hide,Show,Extjs5,我想根据在多选组合框(tagfield)中选择的项目动态显示和隐藏表单中的字段 组合框中选择的每个项目都有几个关联的隐藏表单字段(要显示) 字段具有属性“hidden:true” 我可以显示字段,但当我从combobox字段或de tagfield中删除项目时,我不能隐藏它们 listeners:{ select:function( combo, records, eOpts) { var combo = Ext.ComponentQuery.query('

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

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

字段具有属性“hidden:true”

我可以显示字段,但当我从combobox字段或de tagfield中删除项目时,我不能隐藏它们

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;  
                } 
            }
        }
}
隐藏:

你能给我一些建议来修改代码吗

注意:很抱歉之前的下一篇文章放错了位置

我试图实现你的建议,但没有成功(初学者的困难)

我的代码:

 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;  
        } 
    }
  }
} 
侦听器:{
选择:功能(组合、记录、EOPT){
var combo=Ext.ComponentQuery.query('#combo')[0];
var fields=Ext.ComponentQuery.query(“[autoHideTag]”);
var records=combo.getValue();
控制台日志(记录);
for(var i=0,count=records.length;i
萤火虫说:

TypeError:fields.setVisible不是函数

你能帮我提些建议吗


谢谢。

事实上,您的代码有一个逻辑缺陷。您使所有字段都可见,但是当您删除第三个标记时,会发生什么?您在组合框中循环当前选定的标记,显示时,您有
[“itemone”、“itemtwo”]
,其中没有“itemthree”。因此,您的最后一个案例,可能隐藏第三个字段的案例是note-executed。依此类推第二个和第一个标记

相反,我要做的是循环遍历每个字段,如果选择了标记,则显示它,如果没有选择,则隐藏它。您可以使用
记录。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 );
瞧。玩得开心

// select all components with property autoHideTag resolving to something truthy
var fields = Ext.ComponentQuery.query('[autoHideTag]');
// setting a component visible or hidden when it is already the case has no side-effect
field.setVisible( records.indexOf(field.autoHideTag) !== -1 );