明確調用extJS的initComponent類

Question

可能有更好的方法來做到這一點，請爲我提供有關如何儘可能達到它的指導，但我想知道是否有一種方法，在Tab鍵點擊，以顯式調用那容器的initComponent函數？也就是說，該標籤面板內部的容器。

我目前有一個initComponent在上面的面板中加載一個帶有多個Property Grid的Grid Panel。當用戶點擊另一個選項卡上的按鈕來更新所述面板存儲時，商店將發生變化，因此我想再次調用initComponent以使用最新更新的商店刷新屬性網格。

這裏是其他標籤按鈕編程切換接片的一個代碼段：

buttons: [{ 
    text: 'Configure', 
    handler: function() { 
     // Get name of role 
     var roleList = Ext.getCmp('chefRoleRunListInformationGrid'); 

     if (roleList.getSelectionModel().hasSelection()) { 
     var roleName = roleList.getSelectionModel().getSelection(); 
     roleName = roleName[0]['raw'][0]; 

     // Get Role Setup form 
     Ext.getCmp('chefRoleSetupFormPanel').getForm().setValues({ 
      roleName: roleName 
     }); 
     } 

     var chefTabPanel = Ext.getCmp('chefTabPanel'); 
     chefTabPanel.setActiveTab(1); 

     var chefRoleRunListInformationStore = Ext.getStore('chefRoleRunListInformationStore'); 
     var chefRequiredCookbooksGrid = Ext.getCmp('chefRequiredCookbooksGrid'); 
     var roleRunListInfoGrid = Ext.getCmp('chefRoleRunListInformationGrid'); 

     roleRunListInfoGridColumns = roleRunListInfoGrid.columns; 

     chefRequiredCookbooksGrid.reconfigure(chefRoleRunListInformationStore); 
    } 
    }] 

後chefTabPanel.setActiveTab（1），我想如果可能的話調用initComponent功能重新加載新門店的標籤。

據說這裏標籤我的生活在集裝箱代碼：

Ext.define('chefCreateAndPinRolesLayoutContainer', { 
    extend: 'Ext.panel.Panel', 

    layout: 'fit', 
    items: [{ 
     xtype: 'container', 
     layout: { 
      type: 'hbox', 
      align: 'stretch' 
     }, 
     items: [{ 
      xtype: 'container', 
      flex: 1, 
      layout: { 
       type: 'vbox', 
       align: 'stretch' 
      }, 
      border: 1, 
      items: [{ 
       xtype: 'container', 
       flex: 1, 
       layout: 'fit', 
       items: [ 
        Ext.create('chefRequiredCookbooksGridPanel') 
       ] 
      }, { 
       xtype: 'container', 
       flex: 1, 
       layout: 'fit', 
       items: [ 
        Ext.create('chefRoleSetupFormPanel') 
       ] 
      }] 
     }, { 
      xtype: 'container', 
      flex: 1, 
      layout: { 
       type: 'vbox', 
       align: 'stretch' 
      }, 
      items: [{ 
       xtype: 'container', 
       flex: 1, 
       layout: 'fit', 
       items: [ 
        Ext.create('chefOptionalCookbooksGridPanel') 
       ] 
      }, { 
       xtype: 'container', 
       flex: 1, 
       layout: 'fit', 
       items: [ 
        Ext.create('chefAttributeGridContainer') 
       ] 
      }] 
     }] 
    }], 

    initComponent: function() { 
     var me = this; 
     var chefRCS = Ext.create('chefRequiredCookbooksStore'); 

     var requiredCookbooksStore = Ext.getStore('chefRequiredCookbooksStore'); 
     var chefAttributesGridContainer = Ext.getCmp('chefAttributesGridContainer'); 

     requiredCookbooksStore.load({ 
      scope: this, 
      callback: function(records, operation, success) { 
       requiredCookbooksStore.data.each(function(item, index, totalItems) { 
        var cookbookName = item['raw'][0]; 
        var cookbookVersion = item['raw'][1]; 

        var attributesGrid = Ext.create('Ext.grid.property.Grid', { 
         width: 450, 
         id: cookbookName, 
         source: { 
          "Cookbook": cookbookName, 
          "Version": cookbookVersion 
         }, 
         viewConfig: { 
          scroll: 'false', 
          style: { 
           overflow: 'auto', 
           overflowX: 'hidden' 
          } 
         } 
        }); 
        chefAttributesGridContainer.add(attributesGrid); 
        chefAttributesGridContainer.doLayout(); 
       }); 
      } 
     }); 

     me.callParent(arguments); 
    } 
}); 

任何想法？

Answer 1

你的initComponent代碼沒有做任何需要在那裏。那麼爲什麼不把它解壓縮到initStore方法中，然後就像調用initComponent中的任何其他方法以及更改選項卡時那樣調用它。

與該問題無關的另一個建議：避免使用Ext.getCmp它會導致非常緊密的耦合和糟糕的體系結構。