ExtJS：隐藏时销毁卡片的最佳方式，显示时实例化？

我正在使用CardLayout在具有多个节点的全屏面板之间切换。为了最大限度地减少内存使用，我想在一张卡被隐藏时销毁它，并且只在显示时（从配置对象）重新创建它

如果您查看下面的“切换卡”按钮处理程序，您将看到我目前是如何完成这一任务的。但是，这看起来很笨拙（使用ComponentMgr实例化卡、将其添加到容器、移除旧卡等）。有没有更好的方法来实现这一点？同样，我的主要目标是在看不见的时候销毁卡片

谢谢

var panel1Cfg = {
    id: 'card-1',
    xtype: 'panel',
    html: 'Card 1',
    listeners: {
        render: function() { console.log('render card 1'); },
        beforedestroy: function() { console.log('destroying card 1'); }
    }
};

var panel2Cfg = {
    id: 'card-2',
    xtype: 'panel',
    html: 'Card 2',
    listeners: {
        render: function() { console.log('render card 2'); },
        beforedestroy: function() { console.log('destroying card 2'); }
    }
};

var cardPanel = new Ext.Panel({
    renderTo: document.body,
    layout: 'card',
    items: [ panel1Cfg ],
    activeItem: 0,
    itemCfgArr: [ panel1Cfg, panel2Cfg ],
    activeItemCfgIndex: 0,
    tbar: [
        {
            text: 'Switch Cards',
            handler: function() {
                var cardToRemove = cardPanel.getLayout().activeItem;

                // Figure out which panel create/add/show next
                cardPanel.activeItemCfgIndex = (cardPanel.activeItemCfgIndex + 1) % cardPanel.itemCfgArr.length;

                // Use cfg to create component and then add
                var cardToShow = Ext.ComponentMgr.create(cardPanel.itemCfgArr[cardPanel.activeItemCfgIndex]);
                cardPanel.add(cardToShow);

                // Switch to the card we just added
                cardPanel.getLayout().setActiveItem(1);

                // Remove the old card (console should show 'destroy' log msg)
                cardPanel.remove(cardToRemove);
            }
        }
    ]
});

---

我认为一个更优雅的解决方案是创建一个类来包装您的配置，并在激活/停用配置时处理创建/销毁操作。这样你的卡片布局就不需要知道这种特殊的处理方式，而且你可能会把被破坏的卡片和不被破坏的卡片混在一起。您还可以在其他布局中重用此行为，例如

选项卡面板

，甚至

手风琴布局

您的类可能如下所示：

CleanPanel = Ext.extend(Ext.Panel, {

    /** @cfg panelCfg - configuration for wrapped panel */
    panelCfg: null,

    layout: 'fit',
    autoDestroy: true,

    initComponent: function() {
        CleanPanel.superclass.initComponent.call(this);

        this.on({
            scope: this,
            activate: this.createPanel,
            deactivate: this.destroyPanel
        });
    },

    createPanel: function() {
        this.add(this.panelCfg);
    },

    destroyPanel: function() {
        this.removeAll();
    }

});

在主面板中添加两个，包装

panel1Cfg

和

panel2Cfg

，将

activeItem

切换逻辑保留在主面板中，应该可以很好地工作。可能有一些初始化细节需要解决，但您已经明白了

---

祝你好运

我面临着这个逻辑的问题。我不知道该把这个逻辑放在哪里。如果你愿意，我已经在新的线程中提出了一个问题。给你。请帮我解决这个问题。我也贴了一个提琴样本来展示我的方法。Thnks。