EXTJS show/ hide many containers in controller

Question

I have a view that has many containers in ExtJs. Consider the items of the view are something like the following.

    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();
   }

Then in mycontroller I want to hide and show the containers according to the button I click. In the controller I have the refs and selectors for these containers,

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

And then when I click a button I execute a function

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

Then in each function I just show/hide containers (same logic for all)

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

Everything works fine but the problem is how to handle this behavior if I have 100 conatiners (for any reason, does not matter).

How can I show/hide containers dynamically without repeating too many lines of code for manually hide/show containers?

I have tried to assign all selectors to an array something like

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

and then just using a for loop to hide all of them and just show the correct one.

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

Something like this seems to work, but I prefer to avoid eval. Any suggestions for this kind of logic?

Just a comment about your creation of items, you should really be doing this.items = in the constructor, not initComponent. — incutonez
I always do it in initComponent . Seems interesting to research why this should be done in constructor. Maybe in another post — dev
You know, I think it's something the entire Ext community struggles understanding, and I could be totally wrong. However, looking at your code, it could definitely be configuration driven, and you'd definitely want that to be in the constructor. — incutonez

incutonez incutonez · Accepted Answer · 2014-03-12T13:35:31

Unfortunately, you didn't provide a Fiddle, so I don't have full code to work with. What I'm thinking is that you add a class, say containerPlaceHolder, to each container, and then in your menu1 method, you do something like Ext.select('.containerPlaceHolder').hide();, which will first return all of your HTML elements wrapped as an Ext object (specifically Ext.dom.CompositeElement), and then give you access to the hide and show methods, which will hide or show all elements with that class name.

EXTJS show/ hide many containers in controller

1 Answers