PDA

View Full Version : Items swap in Container



Gabor Turi
29 Apr 2010, 11:15 PM
Hi,
I would like to exchange two elements:


Ext.onReady(function () {
var panel1 = new Ext.Panel({
id: 'first',
title: 'First'
});
var panel2 = new Ext.Panel({
id: 'second',
title: 'Second'
});
var ct = new Ext.Container({
items: [panel1, panel2],
renderTo: Ext.getBody()
});
console.log(ct.items.keys); // ["first", "second"]
ct.insert(0, panel2);
ct.doLayout();
console.log(ct.items.keys); // ["second", "first"] // It's good
});Nothing has changed in the HTML
What's missing?

Thanks,
Gabor

Animal
29 Apr 2010, 11:30 PM
The layout code checks whether an already-rendered Component has as its containing element, the Container's element.

In your case it does, the child Components are housed inside the correct element. So it does nothing.

You will have to add panel2's getPositionEl() to a hidden element before you call that doLayout.

Gabor Turi
30 Apr 2010, 12:52 AM
Thank you very much. I think I understand.
So I solved:

ct.insert(0, panel2);
panel2.getPositionEl().insertBefore(...And, I did not use doLayout.

Animal
30 Apr 2010, 2:26 AM
Well, really you need



Ext.onReady(function () {
var panel1 = new Ext.Panel({
id: 'first',
title: 'First'
});
var panel2 = new Ext.Panel({
id: 'second',
title: 'Second'
});
var ct = new Ext.Container({
items: [panel1, panel2],
renderTo: Ext.getBody()
});
console.log(ct.items.keys); // ["first", "second"]
var el = panel2.el.dom;
el.parentNode.removeChild(el); // Just ensure that the doLayout knows it has to re-home the Component.
ct.insert(0, panel2);
ct.doLayout();
console.log(ct.items.keys); // ["second", "first"] // It's good
});

Gabor Turi
30 Apr 2010, 3:25 AM
Great, that's nice!
Thank you!