javascript - 显式调用 extJS 类的 initComponent

Question

可能有更好的方法来做到这一点，如果可能的话，请为我提供如何实现它的指导，但我想知道是否有一种方法，在 Tab Click 上，显式调用该容器的 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);
    }
});

有什么想法吗？

Answer 1

您的 initComponent 代码没有执行需要的任何操作。那么，为什么不将它提取到 initStore 方法中，然后像调用 initComponent 中的任何其他方法一样调用它，以及在更改选项卡时调用它。

另一个与问题无关的建议:避免使用 Ext.getCmp 它会导致非常紧密的耦合和糟糕的架构。