ExtJS: Swapping panels within a parent panel

Question

hi,

I am trying to insert a child Panel B (position 1) before a child Panel A(positon 0) in a Parent Panel. This works fine but when I am again reinserting panel B (now in positon 0) after panel A(now in position 1) it does not seem to work. Any Suggestions would be greatly appreciated. Below is the code snippet I am using.

......... .........

var items = parentPanel.items.items;

items[1].el.insertBefore(items[0].el);

parentPanel.doLayout();

..........................

var items = parentPanel.items.items;

items[0].el.insertAfter(items[1].el);

parentPanel.doLayout();

...........................

................

Thank you MS

Answer 1

The items array doesn't change. So items[0] is always going to be Panel A, items[1] is always going to be Panel B - even if you manually move the HTML around the parent container.

Answer 2

You should use the parent panel insert method instead of using the DOM method to move the underlying elements.

For example, to insert a panel in position 1 (Panel B) before a panel in position 0 (Panel A), you should do this:

parentPanel.insert(0, parentPanel.getComponent(1));