javascript - 在 ExtJS 中动态更改组件

Question

我有一个包含 2 个组件的视口(viewport)，一个左侧的列表和一个中央窗口，我想根据用户在左侧列表中选择的内容在中央窗口中显示不同的组件，我试图通过动态实现删除和添加组件，但这只是部分成功，我能够删除组件但不能将其添加回去，下面您可以看到我使用的方法示例。

Ext.define('LabSite.view.Viewport', {
    id: "MainViewPort",
    renderTo: Ext.getBody(),
    extend: 'Ext.container.Viewport',
    requires:[
        'Ext.tab.Panel',
        'Ext.layout.container.Border',
        'LabSite.view.Location'
    ],

    layout: {
        type: 'border'
    },
    items: [{
        region: 'west',
        xtype: 'panel',
        title: 'PC lab managment',
        items: [{
            xtype: 'dataview',
            store: Ext.data.StoreManager.lookup('areaStores'),          
            cls: 'feed-list',
            itemSelector: '.feed-list-item',
            overItemCls: 'feed-list-item-hover',
            tpl: '<tpl for="."><div class="feed-list-item">{name}</div></tpl>',
            listeners: {
                selectionchange: function(selmodel, selection) {
                    var xtype=selection[0].data.name.toLowerCase();

                    var centr=Ext.getCmp('centerView');
                    var viewPort=Ext.getCmp('MainViewPort');
                    viewPort.remove(centr);
                    var newcmp=new Ext.Component ({ region: 'center',
                                   id:'centerView',
                                   xtype:'locations'});                                

                    viewPort.add(newcmp);
                    viewPort.doLayout( );

                }           
            }           
        }]
    },
    { region: 'center',
      id:'centerView',
      xtype:'locations'}
    ]   
});

Answer 1

什么M.K.发布是最好的方法，但是我有一个侧面观点。当您动态更新布局时，Ext 会自动为您重新布局，因此 doLayout 调用是多余的并且会增加额外的开销。其次，它也是低效的，因为删除，然后添加将触发布局。假设您使用的是 >= 4.1，您应该这样做:

Ext.suspendLayouts();
center.remove(0);
center.add({
    xtype: 'newcmp'
});
Ext.resumeLayouts(true);