PDA

View Full Version : [CLOSED][3.x] Bug in panel's removeAll(), add() and/or destroy()?



realjax
2 Feb 2010, 4:46 AM
Try this code:



// a menu
var accordionMenu = [{
title: 'item',
border: false,
collapsible: true,
padding: 0,
align: 'center',
items: new Ext.menu.Menu({
floating: false,
autoHeight: true,
cls: 'x-menu',
items: [{
text: 'anItem'
}, {
text: 'anotherItem'
}]
})
}, {
title: 'item 2',
border: false,
items: new Ext.menu.Menu({
floating: false,
autoHeight: true,
cls: 'x-menu',
items: [{
text: 'anItem'
}, {
text: 'anotherItem'
}]
})
}
];

var aWindow = new Ext.Window({
layout:'accordion',
width:500,
height:300,
items:accordionMenu
});

aWindow.show(this);

// then remove all items

aWindow.removeAll();

// add them again

aWindow.add(accordionMenu);

// and doLayout()
aWindow.doLayout();
Running the above code in firebug's console gives:

TypeError: c.el.up("li.x-menu-list-item", 5) is null { message="c.el.up("li.x-menu-list-item", 5) is null", more...}

However....

when you replace


aWindow.add(accordionMenu); with te actual value of the array so it becomes:



aWindow.add([{
title: 'item',
border: false,
collapsible: true,
padding: 0,
align: 'center',
items: new Ext.menu.Menu({
floating: false,
autoHeight: true,
cls: 'x-menu',
items: [{
text: 'anItem'
}, {
text: 'anotherItem'
}]
})
}, {
title: 'item 2',
border: false,
items: new Ext.menu.Menu({
floating: false,
autoHeight: true,
cls: 'x-menu',
items: [{
text: 'anItem'
}, {
text: 'anotherItem'
}]
})
}
])
Then all of a sudden everything works just fine...


ps. tried this with Extjs 3.0 3.03 and 3.1.

evant
2 Feb 2010, 7:43 PM
Not a bug. removeAll will automatically destroy the components unless:

a) You pass false to removeAll
b) autoDestroy is defaulted to false on the container.

As such, the accordionMenu is destroyed, which means it can't be re-added to a container.

Marking as closed.

realjax
2 Feb 2010, 11:55 PM
Hold on.

1) 'Removes all components from this container.' is what the docs say about removeAll(). No where it says it also automatically destroys the container, If it does, then I don't see the point of this method... one might as well destroy the container.

2) Passing false to removeAll() still leads to the same error mentioned in my first post

3) And how do you explain passing the actual array to add() to work flawless???

evant
3 Feb 2010, 12:08 AM
The difference is illustrated here.



Ext.onReady(function(){
var p = new Ext.Panel({
title: 'Panel'
});

var w = new Ext.Window({
width: 400,
height: 400,
layout: 'fit',
items: p,
buttons: [{
text: 'removeAll()',
handler: function(){
w.removeAll();
w.add(p);
w.doLayout();
}
},{
text: 'removeAll(false)',
handler: function(){
w.removeAll(false);
w.add(p);
w.doLayout();
}
}]
});
w.show();
});


1) I never said it destroys the container, I said it destroys the component.

2) Not when I ran it.

3) Because you're creating a new instance, there's a difference between an object literal and an object instance:



var o = {xtype: 'panel'}; //literal
var p = new Ext.Panel(); //instance


Again, marking as closed.

realjax
3 Feb 2010, 12:48 AM
:) Ok thanks, I won't reopen anymore :D

Still trying to comprehend what the difference in this is though:



var a = [{ title: 'item',
items: new Ext.menu.Menu({
autoHeight: true,
items: [{
text: 'anItem'
}]
})
}];

panel.add(a)and



panel.add([{title: 'item',
items: new Ext.menu.Menu({
autoHeight: true,
items: [{
text: 'anItem'
}]
})
}]);

evant
3 Feb 2010, 12:57 AM
There is no difference.

realjax
3 Feb 2010, 1:36 AM
Great.

I rest my case.
No further questions.
The witness is yours.
The defence rests.