PDA

View Full Version : Toggling contentEl



GJB
13 Nov 2009, 2:03 AM
I have a viewport which has a border layout with east, center, west and south regions.
The south is collapsed by default. Inside west you have again one more border layout
with center and south regions. I am displaying some data in this south region titled "East Down1".
On click of blue arrow displayed in this panel title am opening Main South region titled "East Down2"
My requirement is when you open East Down2 the content which is there in East Down 1 should appear in "East Down 2".
Thanks.

[

Ext.onReady(function(){

new Ext.Viewport(
{
id: 'view-port',
layout: 'border',
items: [
{
region: 'west',
collapsible: true,
title: 'Navigation',
width: 200,
layout: 'border',
id: 'west-region',
items: [{
region: 'center',
height: Math.round(Ext.lib.Dom.getViewportHeight() * .4)
},
{
region: 'south',
contentEl: 'div-data',
layout: 'fit',
collapsible: true,
title: '<div class="x-tool-max" id="pc-max"> </div>East down1 ',
height: Math.round(Ext.lib.Dom.getViewportHeight() * .4) - 10
}]
},
{
region: 'east',
title: '<div id="btnSave" class="x-tool-save">SAVE</div>Title for the Grid Panel',
collapsible: true,
id: 'east-region',
html: 'tab-container',
width: 200

},
{
region: 'center',
layout: 'border',
title: 'north',
height: Math.round(Ext.lib.Dom.getViewportHeight() * .4),
items: [{
region: 'center',
collapsible: true
},
{
region: 'south',
height: Math.round(Ext.lib.Dom.getViewportHeight() * .4) - 10,
collapsible: true,
title: '<div id="pc-nex-btn"></div><div id="pc-pre-btn"></div>Search Result'

}]
},
{
region: 'south',
id: 'south-region',
layout: 'fit',
items: [{
xtype: 'panel',
title: '<div class="x-tool-min" id="pc-min"></div>East Down2',
height: '100%',
contentEl: 'div-data'
}]
}]
});

Ext.get('pc-max').on('click', function() {
Ext.getCmp('south-region').setHeight(200);
Ext.getCmp('view-port').items.items[0].items.items[1].hide();
Ext.getCmp('view-port').items.items[2].items.items[1].collapse();
Ext.getCmp('view-port').doLayout();
});
Ext.get('pc-min').on('click', function() {
Ext.getCmp('south-region').setHeight(0);
Ext.getCmp('view-port').items.items[2].items.items[1].expand();
Ext.getCmp('view-port').items.items[0].items.items[1].show();
Ext.getCmp('view-port').doLayout();
});
});