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

centerExtJS では、ボーダー レイアウトからコンポーネントを削除/挿入することはできません。「centerView」コンポーネントを でコンテナ/パネルにしlayout: fitてから、必要に応じてコンポーネントを追加または削除してみてください。

于 2013-01-17T17:50:35.673 に答える