Question

有一种更好的方法可以做到这一点，请为我提供如何实现它的指导，但是我想知道是否有一种方法，在Tab Click上显式调用容器initComponent函数？也就是说，生活在该选项卡面板内的容器。

我目前在所述面板中有一个initComponent，用于加载一个带有多个Property Grids的Grid Panel。当用户单击另一个Tab上的按钮以更新所述面板存储时，存储会发生更改，因此我想再次调用initComponent以使用新更新的存储刷新Property Grids。

以下是以编程方式切换标签的其他标签按钮的代码段：

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它会导致非常紧密的耦合和糟糕的架构。

显式调用extJS类的initComponent

1 个答案: