PDA

View Full Version : remove nested panel item delete all the parent items



mik001
28 Feb 2011, 10:47 AM
Hi Sencha devs,

I'm still learning ExtJS from "ExtJS in action" and "Learning ExtJs 3.2", so
first of all apologizes if this would sound like a noob question.

I have the following nested panel structure:



new new Ext.Panel ({
id: 'main',
title:'main',
layout: 'fit',
region: 'center',
autScroll: true,
items: {
layout: 'border',
border: false,
defaults: {
collapsible: false,
split: true
},
items: [module_tree,
new Ext.Panel({
id: 'westRegion',
region: 'center',
layout: 'fit',
border: false,
items: {
layout: 'border',
border: false,
items: [module_grid, module_welcome]
}
})]
}
});
module_tree is a TreePanel, module_grid is a GridPanel and module_config is a normal Panel.

Now, the rendering is fine, and what I want to do is hiding the module_welcome panel from the westRegion, in favor of a new module_config panel that displays some different data based on clicks
on the GridPanel.

On the event 'click' on the TreePanel, I want to remove the module_welcome panel, so I've added the following:



var westArea = Ext.get('westRegion');
westArea.remove(module_welcome, true);
westArea.add(module_config);
westArea.doLayout();


The behavior I don't understand is why after removing the module_welcome
then all the westArea panel is removed (in fact third line of code throws error as westArea becomes null).
After the removal only the module_tree is leaved in the DOM.

Where is the problem?

Thanks for your time
mik001

mik001
2 Mar 2011, 8:01 AM
ping