1

我有一个包含 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'}
    ]   
});
4

2 回答 2

9

MK 发布的是最好的方法，但是我有一个观点。当您动态更新布局时，Ext 会自动为您重新布局，因此 doLayout 调用是多余的并增加了额外的开销。其次，它也是低效的，因为删除，然后添加将触发布局。假设您使用 >= 4.1，您应该执行以下操作：

Ext.suspendLayouts();
center.remove(0);
center.add({
    xtype: 'newcmp'
});
Ext.resumeLayouts(true);
于 2013-01-17T21:42:12.940 回答
4

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

于 2013-01-17T17:50:35.673 回答