Reordering the subpanels of an ExtJS panel - extjs2

Question

I have an ExtJS Panel which contains a label in the first row and second row. Later i have added 4 sub panels each contains a checkbox, and 2 textfields( each sub panel in a row in the main panel). Then i have 2 Move up/Move down buttons which reorder these sub panels up/down by 1 row for each click of the up/down buttons. I am able to layout the main panel with all the subpanels but stuck at reordering the subpanels. How to handle this(reordering the subpanels) functionality in ExtJS?

Answer 1

The trick to change panel elements dynamically is to call doLayout function after change.
Not prettiest but working example of your problem:
var Panel1 = Ext.create('Ext.form.Panel', {
title: 'first',
items: [{
fieldLabel: 'text1',
xtype: 'textfield'
}, {
fieldLabel: 'text2',
xtype: 'textfield'
}, {
xtype: 'checkbox'
}]
})
var Panel2 = Ext.create('Ext.form.Panel', {
title: 'second',
items: [{
fieldLabel: 'text1',
xtype: 'textfield'},
{
fieldLabel: 'text2',
xtype: 'textfield'}]
})
var mainPanel = Ext.create('Ext.panel.Panel', {
title: 'main',
items: [Panel1, Panel2]
})
new Ext.Window({
width: 300,
height: 400,
layout: 'fit',
items: [mainPanel],
bbar: [{
text: 'reorder',
handler: function() {
var swap = mainPanel.items.items[0];
mainPanel.items.items[0] = mainPanel.items.items[1];
mainPanel.items.items[1] = swap;
mainPanel.doLayout();
}
}]
}).show();
This is for ExtJs 4.0.7, but trick works for earlier versions, just adjust panel creation syntax.