Question

我有一个包含2个组件的视口左侧和中央窗口的列表，我想在中央窗口中显示不同的组件，这取决于左侧列表中选择的用户，我试图通过动态完成此操作删除和添加组件，但它只是部分成功，我能够删除组件，但不能将其添加回来，下面你可以看到我使用的方法的样本。

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调用是多余的并且增加了额外的开销。其次，它也是低效的，因为删除，然后添加将触发布局。假设你使用＆gt; = 4.1，你应该这样做：

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

Answer 2

ExtJS不允许从边框布局中删除/插入center组件。您可以尝试将“centerView”组件设为包含layout: fit的容器/面板，然后根据需要在其中添加或删除组件。

在ExtJS中动态更改组件

2 个答案: