Javascript 显式调用extJS类的initComponent

可能有更好的方法可以做到这一点，如果可能的话，请为我提供如何实现这一点的指导，但我想知道是否有一种方法，在单击选项卡时，显式调用该组件函数？也就是说，位于该选项卡面板内的容器

我目前在上述面板中有一个initComponent，它加载一个带有多个属性网格的网格面板。当用户单击另一个选项卡上的按钮以更新所述面板存储时，存储将发生更改，因此我想再次调用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);
    }
});

---

有什么想法吗？

您的initComponent代码没有做任何需要在其中的事情。那么，为什么不将它提取到

initStore

方法中，然后像调用

initComponent

中的任何其他方法一样调用它，以及在更改选项卡时调用它呢

---

另一个与问题无关的建议是：避免使用

Ext.getCmp

，这将导致非常紧密的耦合和糟糕的体系结构。

这正是我所做的，它最终工作得非常完美。非常感谢斯图尔特！