javascript - 显式调用extJS类的initComponent

可能有一种更好的方法，如果可能的话，请为我提供如何实现的指导，但我想知道是否可以通过Tab键单击来显式调用该容器的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函数，以使用新商店重新加载该选项卡。

这是我所说的位于Tab中的容器的代码：

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会导致非常紧密的耦合和不良的体系结构。

关于javascript - 显式调用extJS类的initComponent，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40551324/