ExtJS: Лучший способ уничтожить карту, когда спрятан, создать экземпляр, когда он показан?

Question

Я использую 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);
            }
        }
    ]
});

Answer 1

Я думаю, что более элегантным решением было бы создание класса, который оборачивает ваш конфиг и обрабатывает создание / уничтожение, когда он активирован / деактивирован.Таким образом, макет вашей карты не должен знать об этой специальной обработке, и вы могли бы потенциально смешивать карты, которые разрушаются, и карты, которые не имеют.Вы также можете использовать это поведение в других макетах, таких как TabPanel или даже AccordianLayout.

Ваш класс может выглядеть примерно так:

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 на главной панели, и она должна работать довольно хорошо.Возможно, вам понадобятся некоторые детали инициализации, но вы поняли идею.

Удачи!