Question

我有一个在ExtJs中有许多容器的视图。考虑视图的项目如下所示。

    initComponent : function(){
    this.items = [{
                        xtype  : 'button',
                        text   : 'menu1',
                        itemId : 'btnMenu1'
                    },{
                        xtype  : 'button',
                        text   : 'menu2',
                       itemId  : 'btnMenu2'
                    },{
                        xtype  : 'button',
                        text   : 'menu3',
                        itemId : 'btnMenu3'
                    },{
          xtype  : 'container', 
          itemId : 'report1', 
          items  : [{
            xtype : 'button',
            title : 'clickme 1'
          }]        
        },{
          xtype  : 'container',
          itemId : 'report2', 
          items  : [{
            xtype : 'button',
            title : 'clickme 2'     
          }]                
        },{
          xtype  : 'container',
          itemId : 'report3',
          items  : [{
            xtype : 'button',
            title : 'clickme 3'             
              }]
        }]
   this.callParent();
   }

然后在mycontroller中我想隐藏并根据我点击的按钮显示容器。在控制器中，我有这些容器的refs和selectors，

       refs     : [{
                    /***all containers**/
        ref      : 'ref....',
        selector : 'selector....'
    }],

然后当我点击一个按钮时，我执行一个功能

      init: function() {
              this.control({                
        'selector' : {
            click : this.menu1
        },
        'selector' : {
            click : this.menu2          
        },
        'selector' : {
            click : this.menu3
        }       
              });
        },

然后在每个函数中我只显示/隐藏容器（所有的逻辑相同）

      menu1 : function(){
        this.getConatiner1().show();        
        this.getContainer2().hide();    
        this.getContainer3().hide();
     },

一切正常，但问题是如果我有100个conatiner（无论出于何种原因，无关紧要），如何处理这种行为。

如何动态显示/隐藏容器，而无需重复过多行代码来手动隐藏/显示容器？

我试图将所有选择器分配给类似

的数组

            var selectors = ['getContainer1','getContainer2',...]

然后只使用for循环隐藏所有这些，只显示正确的。

          for(allselectors){
            eval('selector.hide()');
          }
          selectedContainer.show();

这样的事情似乎有效，但我更愿意避免使用eval。对这种逻辑的任何建议？

Answer 1

不幸的是，你没有提供小提琴，所以我没有完整的代码可以使用。我想的是你向每个容器添加一个class，比如 containerPlaceHolder ，然后在你的menu1方法中，你会做{{1}之类的事情。首先返回包裹为Ext对象（特别是Ext.dom.CompositeElement）的所有HTML元素，然后让您访问隐藏或隐藏的Ext.select('.containerPlaceHolder').hide();和hide方法显示具有该类名的所有元素。

EXTJS在控制器中显示/隐藏许多容器

1 个答案: