EXTJS顯示/隱藏控制器中的許多容器

我有一個視圖，在ExtJs中有很多容器。考慮視圖的項目如下所示。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(); 
    }

然後在我的控制器中，我想按照我點擊的按鈕來隱藏和顯示容器。在控制器我對這些容器裁判和選擇，

 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個conatiners（出於任何原因，無所謂）處理這種行爲。

如何動態顯示/隱藏容器，而不必重複太多手動隱藏/顯示容器的代碼行？

我已經嘗試了所有的選擇分配給數組類似

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

，然後只用一個for循環隱藏所有的，只是顯示正確的一個。

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

類似這樣的東西似乎工作，但我更喜歡避免eval。對這種邏輯有什麼建議？

來源

2014-03-12 dev

只是關於你創建項目的評論，你應該在構造函數中執行'this.items ='，而不是initComponent。 – incutonez

我總是在'initComponent'中執行它。似乎有趣的研究爲什麼這應該在構造函數中完成。也許在另一篇文章中 – dev

你知道，我認爲這是整個Ext社區都在努力理解的東西，我可能完全錯了。然而，看着你的代碼，它肯定可以被配置驅動，並且你一定希望它在構造函數中。 – incutonez

不幸的是，你沒有提供小提琴，所以我沒有完整的代碼來處理。我在想的是，你爲每個容器添加一個class，比如說containerPlaceHolder，然後在你的menu1方法中，你可以執行一些類似Ext.select('.containerPlaceHolder').hide();的操作，它將首先返回所有包裝爲Ext對象的HTML元素Ext.dom.CompositeElement），然後讓您訪問hide和show方法，這些方法將隱藏或顯示具有該類名稱的所有元素。

來源

2014-03-12 13:35:31 incutonez

這就是我以前用jQuery做的事情。我原本以爲是否在extjs中有另一個竅門。我會試試看，謝謝 – dev

控制器中的引用只會檢索找到的第一個組件，因爲它會執行'down（）'。一個解決方案是使用'query（）'從視圖（主視圖）中獲取所有組件（數組）（'var report = this.getReport（），category = report.query（'[cls = displayReport]'），'）容器），然後使用'each'或'for'循環遍歷所有組件。 'Ext.Array.each（類別，函數（構造，索引）{\t \t construct.hide（）;}）;' – dev

哦，好吧，我是假設你點擊一個按鈕來觸發menu1來隱藏某些容器...如果是這樣的話，那麼我的代碼應該可以工作，並且你不應該需要他們的'refs'部分。 – incutonez

EXTJS顯示/隱藏控制器中的許多容器

回答

相關問題