PDA

View Full Version : Best way to destroy card when hidden, instantiate when shown?



charris
6 May 2011, 7:06 AM
Hi everyone. 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.

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.

Thanks!


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

Pankaj kumar
22 Feb 2012, 11:13 PM
This is not showing any UI. Log shows only "render card 1".

new Ext.Application({
name: "ListDemo_MemoryOptimization",

launch: function() {

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

Above is code which I tried.