明示的にextJSクラスのinitComponentクラスを呼び出す

Question

これを行うにはもっと良い方法があります。できるだけそれを達成する方法について私に指導してください。しかし、Tab Clickで明示的に呼び出す方法があればそのコンテナinitComponent関数？つまり、そのタブパネルの内部に存在するコンテナです。

私は現在、パネルにいくつかのプロパティグリッドを持つグリッドパネルをロードするinitComponentを持っています。ユーザーが別のタブのボタンをクリックしてパネルストアを更新すると、ストアが変更されるため、initComponentを再度呼び出して、新しく更新されたストアでプロパティグリッドを更新したいとします。ここ

はプログラムでタブを切り替える他のタブボタンのコードスニペットである：chefTabPanel.setActiveTab（1）後

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

、Iは、可能であればリロードする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を使用しないと、非常に密接な結合と悪いアーキテクチャにつながります。