[CLOSED][3.1] <Component>.add(<Panel>) doesn't work

[wceuppens]

The problem occurs in 3.1.0 under ff3.5 and ie8. No problems with 3.0.0.

Description:
I have a tree in a viewport that - when clicked on a leave - replaces the contents of the center panel.
When I click the first time on a leave, the correct panel appears in the center. But when I want to return to a previously displayed panel, I receive the following error:
OX b.getPositionEl().dom is undefined
Ext.DomHelper=function(){var t=null,k=/^...dblclick",this.onNodeDblClick,this)}});\n
(Ext-all.js line 7).

Code snippet
:
:
:

new Ext.Panel({
region : 'center', // a center region is ALWAYS required for border layout
id : 'center',
deferredRender : false,
autoScroll : true,
items : [panel1Welkom]
})
:
:
:
//Listen for mouse clicks
Ext.get('westmenu').on("click", function(){
node = tree.getSelectionModel().getSelectedNode();
if (!(node == null) && node.isLeaf()) {
doMenuSelection(node.id, node.text);
}
});
:
:
:
var currentPanel = 'panel1Welkom';

var panelUnderConstruction = new Ext.Panel({
id : 'panelUnderConstruction',
items: [{
title : 'Under Construction',
html : '<br> Please come back later.',
border : false
}]
})

var panel1Welkom = new Ext.Panel({
id : 'panel1Welkom',
items: [{
title : 'Welkom',
contentEl : 'center2',
border : false
}]
})

var panel1Log1 = new Ext.Panel({
title : 'Log',
border : false,
items: [{
contentEl : 'center1log',
border : false
}]
})
var panel1Log2 = new Ext.Panel({
title : 'Log Details',
border : false,
items: [{
contentEl : 'center1',
border : false
}]
})
var panel1Log = new Ext.Panel({
id : 'panel1Log',
items: [panel1Log1, panel1Log2]
})

function doMenuSelection(id, text){
nodeid = Math.round(id / 1000000);
// leaveid = (id - nodeid * 1000000);
// console.log("You clicked on", nodeid, leaveid, text);
view = Ext.getCmp('center');
if (nodeid == 1 && text == 'welkom'){
if (currentPanel != 'panel1Welkom'){
view.remove(currentPanel);
view.add(panel1Welkom);
currentPanel = 'panel1Welkom';
}
}
else if (nodeid == 1 && text == 'log'){
if (currentPanel != 'panel1Log'){
view.remove(currentPanel);
view.add(panel1Log);
currentPanel = 'panel1Log';
}
}
else {
view.remove(currentPanel);
view.add(panelUnderConstruction);
currentPanel = 'panelUnderConstruction';
};
view.doLayout();
};

Question:
Is it possible that my dom-element is disposed of after the first display?

Regards,
Willy.

[Condor]

Removing a component from a container will destroy the component, so you can't use it again. You can remove a component and specify autoDestroy:false, but then you have/move to hide the component yourself.

This is a classic case for using layout:'card', so why are you going through all the trouble of adding and removing panels?

[wceuppens]

Thanks Condor,

I understand that the bug (not destroying the component) was in 3.0 and corrected in 3.1. It does make sense.

I took your suggestion to modify my coding to use the "cart" layout. It took me some time - I'm still a newbee at Extjs -, but the resulting code is not only more efficient, it's also more readable.

Vriendelijke groeten,
Willy.