ExtJS:隐藏时销毁卡，在显示时实例化的最佳方法? [英] ExtJS: Best way to destroy card when hidden, instantiate when shown?

问题描述

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

I'm using a CardLayout to switch between full-screen panels that have several nodes. To minimize memory usage, I want to destroy a card when it is hidden and only re-create it (from a config object) if/when it is shown.

如果您查看下面的切换卡"按钮处理程序，将会看到我目前是如何完成此操作的.但是，它看起来很笨拙(使用ComponentMgr实例化卡，将其添加到容器中，删除旧卡等).有没有更好的方法可以做到这一点?同样，我的主要目标是在看不见卡片时将其销毁.

If you look at the 'Switch Cards' button handler below, you'll see how I'm currently accomplishing this. It seems clumsy, however (using ComponentMgr to instantiate the card, adding it to the container, removing the old card, etc.). Is there a better way to accomplish this? Again, my main goal is to destroy the card when it's not visible.

谢谢！

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);
            }
        }
    ]
});

推荐答案

我认为，更优雅的解决方案是创建一个包装您的配置的类，并在激活/停用该配置时对其进行处理.这样，您的名片布局就无需了解这种特殊处理方式，并且有可能将被破坏的名片与未被破坏的名片混在一起.您还可以在其他布局中重用此行为，例如 TabPanel 甚至是 AccordianLayout .

I think a more elegant solution would be to create a class that wraps your config, and handles the creating/destroying when it is activated/deactivated. This way you Card layout doesn't need to know about this special handling, and you could potentially mix cards that get destroyed and cards that don't. You could also reuse this behavior in other layouts, such as a TabPanel, or even AccordianLayout.

您的课程可能看起来像这样:

Your class might look something like this:

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 切换逻辑保留在主面板中，它应该工作得很好.可能会有一些初始化细节需要解决，但是您明白了.

Add a couple of these to your main Panel, wrapping your panel1Cfg and panel2Cfg, keep your activeItem switching logic in the main panel, and it should work quite nicely. There may be some initialization details to work out, but you get the idea.

祝你好运！

这篇关于ExtJS:隐藏时销毁卡，在显示时实例化的最佳方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！