How to add layout dynamically in Exjs4? - extjs

Question

I am working in Extjs4.And I am getting stuck at a point which is how to add accordion layout dynamically in Exjs4? I am using layout vbox and hbox but I als want to add accordion to east region.I tried a lot? but not getting succeed please some one give me some suggestion how to do it?
Ext.define('Am.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id:'viewportId',
alias:'widget.Viewport',
autoScroll:true,
// closable:true,
items: [
{
region:'north',
items:[
{
xtype:'panel',
flex:.2,
title:'north region',
html:'<p>north region'
}
]//end of items
},
{
region:'west',
id:'westId',
//margins:'0 5 5 5',
flex:.3,
//layout:'accordion',
items:[
{
title:'This day in a history',
xtype:'Content'
}
]//end if items
},// end of region west
{
//title:'center',
region:'center',
id:'centerId',
//html:'center region',
items:[
]//End of itmes
},// end of region center
{
region:'east',
id:'eastId',
flex:.3,
items:[
{
xtype:'panel',
title:'panel1',
html:'hi<br>hello<br>good<br><br><br><br><br>morning<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel2',
html:'hi<br>hello<br>good<br><br><br><br<br>noon<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel3',
html:'hi<br>hello<br>good<br><br><br><br><brafter noon<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel4',
html:'hi<br>hello<br>good<br><br><br><br><br><br><brnigth<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel5',
html:'good bye'
},
]//end if items
},
{
//title:'South',
region:'south',
id:'southId',
items:[{
xtype:'panel',
title:"footer",
html:'footer '
}]
},//mainMenu // used mainMenu when you are using mainMenu variable
]//end if items
});//End of view port
I want to add accordion layout to east region dynamically.please give me some suggestion?

Answer 1

Why can't you just set the accordion layout in the config?
E.g.
{
region: 'east'
,layout: 'accordion'
,items: [
// ...
]
}
If you really want to change the region's layout to accordion dynamically, the problem you will encounter is that accordion layout needs to tweak its child components at render time. Or it will be broken. The simplest solution would be to add a copy of the original components, so that they can be rendered again.
You will also need to wrap your child components in another container, because accordion layout will need to be fitted in its parent container in order to work properly.
So, first you should change your east region config as follow:
{
region: 'east'
,id: 'eastId'
// set fit layout for children layout to work as intended
,layout: 'fit'
// wrap children into another container, that we can replace later
,items: [{
xtype: 'container'
,itemId: 'innerCt' // for easy access
,items: [
// ... your previous items
]
}]
// ... remaining of your region configuration
,flex: .3
}
And here's a function that changes east region's layout dynamically:
function changeEastLayout() {
var panel = Ext.getCmp('eastId'),
innerCt = panel.down('#innerCt'),
itemsCopy = [];
// make a copy of the item so accordion layout can render them like it likes
innerCt.items.each(function(item) {
itemsCopy.push(item.initialConfig);
});
// remove previous wrapper
panel.removeAll();
// adds a new wrapper with accordion layout containing the items copy
panel.add({
layout: 'accordion',
items: itemsCopy
});
}
If you wanted to change to another layout that doesn't need to affect the rendering of its children (e.g. hbox) you could use the original items instead of copies:
function changeEastLayout() {
var panel = Ext.getCmp('eastId'),
innerCt = panel.down('#innerCt'),
items = innerCt.removeAll(false); // autoDestroy to false
panel.add({
layout: 'vbox'
,items: items
});
// remove the wrapper container after in order to avoid destroying children
panel.remove(innerCt);
}