PDA

View Full Version : Reorder panel items by Add/Remove



lager
24 Feb 2010, 8:22 AM
Hi, this is my fist thread here at the Ext JS community forums. I've tried google and searching this forums but I couldn't find anything to help me on this one:

I'm trying change the order of my items in a panel by first removing them and then adding them in a different order. Like:

Step 1 (add all items)


// Inside panel

this.add(this.itemA); this.add(this.itemB); this.add(this.itemC);

this.doLayout();

Step 2 (remove all/then add in different order).


// Inside the same panel as in step 1. l

// Remove items but don't destroy them
this.removeAll(false);

// Add, now in different order.
this.add(this.itemB); this.add(this.itemC); this.add(this.itemA);

this.doLayout();
The result of this is that the items (itemA, itemB and itemC) are added back to the panel, but they appear in the same order as before. I really don't want to destroy the items, only change the order of them.

I read an old thread saying the containerLayout doesn't support this. Is this still the case?

Wedgie
24 Feb 2010, 4:13 PM
Welcome to the forum!

Since your new here I thought I'd try and help you out, and it looks like you may have found a bug. I did a quick forum search and can't find a reference to it, but it's probably a known one.

Here's the code I wrote to test what you saw:


Ext.onReady(function() {
var a1 = new Ext.form.Label({text: 'a1'});
var a2 = new Ext.form.Label({text: 'a2'});
var a3 = new Ext.form.Label({text: 'a3'});
var panel = new Ext.Panel({
renderTo: Ext.getBody(),
tbar: [
{ text: 'Add forwards',
handler: function() {
panel.add(a1);
panel.add(a2);
panel.add(a3);
panel.doLayout();
}
},
{ text: 'Add backwards',
handler: function() {
panel.add(a3);
panel.add(a2);
panel.add(a1);
panel.doLayout();
}
},
{ text: 'removeAll()',
handler: function() {
panel.removeAll();
panel.doLayout();
}
},
{ text: 'removeAll(true)',
handler: function() {
panel.removeAll(true);
panel.doLayout();
}
},
{ text: 'removeAll(false)',
handler: function() {
panel.removeAll(false);
panel.doLayout();
}
},
]
});
});

BTW it's really useful if you can provide an Ext.onReady() block like this so folks can replicate your issue quickly.

Using this I found that the problem is with removeAll(false), not only does it not work, once you invoke it, it breaks all the other removeAll calls for that object.

And calling removeAll(true) doesn't seem to destroy the components as promised.

This may well be fixed in 3.1 - since I'm still on 3.0 for now.

lager
25 Feb 2010, 9:42 AM
Thank you very much for trying to help and providing some sample code! I will write some myself next time I have a question.

Hoping for a fix in Ext JS 3.1 then :)