Hi Everybody,
I am developing a portal type application. For which I am using 3 hbox layout inside vbox layout. Please see the code below. The problem is when I am maximizing the child item of inner hbox layout it is using only its immidiate parent's area not the full screen.

I want when I will maximize any child item of all the three hbox panel, it will use total screen area. Please see the code and suggest how I can achieve that....

Ext.create('Ext.container.Viewport', {
id : 'main-content-port',
layout: { type: 'vbox', align: 'stretch' },
items: [{
id: 'main-hbox1',
xtype: 'panel',
border : false,
layout:{ type: 'hbox', align: 'stretch' },
flex: 1,
items: [{
xtype: 'custPan',
id : 'firstPan',
title : 'firstPan'
},
{
xtype: 'custPan',
id : 'secPan',
title : 'secPan'
},
{
xtype: 'custPan',
id : 'thirdPan',
title : 'thirdPan'
},
{
xtype: 'custPan',
id : 'fourthPan',
title : 'fourthPan'
},
{
xtype: 'custPan',
id : 'fifthPan',
title : 'fifthPan'
}]
},
{
id: 'main-hbox2',
xtype: 'panel',
border : false,
layout:{ type: 'hbox', align: 'stretch' },
flex: 1,
items: [{
xtype: 'custPan',
id : 'sixthPan',
title : 'sixthPan'
},
{
xtype: 'custPan',
id : 'seventhPan',
title : 'seventhPan'
},
{
xtype: 'custPan',
id : 'eightthPan',
title : 'eightthPan'
},
{
xtype: 'custPan',
id : 'ninthPan',
title : 'ninthPan'
},
{
xtype: 'custPan',
id : 'tenthPan',
title : 'tenthPan'
}]
},
{
id: 'main-hbox3',
xtype: 'panel',
border : false,
layout:{ type: 'hbox', align: 'stretch' },
flex: 1,
items: [{
xtype: 'custPan',
id : 'eleventhPan',
title : 'eleventhPan'
},
{
xtype: 'custPan',
id : 'twelvethPan',
title : 'twelvethPan'
},
{
xtype: 'custPan',
id : 'thirteenthPan',
title : 'thirteenthPan'
},
{
xtype: 'custPan',
id : 'fourteenthPan',
title : 'fourteenthPan'
}]
},{

id: 'bottomBar',
xtype: 'panel',
height : 35,
bodyStyle: 'padding:5px',
items:[]

}]


});

the Custom panel Class(xtype : 'custPan')...
Ext.define('APP.views.customExtPanel' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.custPan',
margin : '5 5 5 5',
layout: 'fit',
flex: 1,
tools : tools,
closeAction: 'hide',
initComponent: function() {
this.store = {
fields: ['name', 'email'],
data : [
{name: 'Test1', email: 'test1@pft.com'},
{name: 'Test2', email: 'test2@pft.com'},
{name: 'Test3', email: 'test3@pft.com'},
{name: 'Test4', email: 'test4@pft.com'},
{name: 'Test5', email: 'test5@pft.com'},
{name: 'Test2', email: 'test2@pft.com'},
{name: 'Test3', email: 'test3@pft.com'},
{name: 'Test4', email: 'test4@pft.com'},
{name: 'Test5', email: 'test5@pft.com'},
{name: 'Test2', email: 'test2@pft.com'},
{name: 'Test3', email: 'test3@pft.com'},
{name: 'Test4', email: 'test4@pft.com'}

]
};


this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];


this.callParent(arguments);
}
});


My Maximizing tool logic...

{
type:'maximize',
itemId: 'maximize',
qtip: 'Maximize Panel',
handler: function(e, target, panelHeader)
{
var panelCmp = panelHeader.up("[xtype='custPan']")
panelCmpIndx = panelCmp.ownerCt.items.indexOf(panelCmp);
var parentKey = 'parent'+panelCmp.id;
var parentObj = {};
parentObj[parentKey] = panelCmp.ownerCt.id;
parentCmpArr.push(parentObj);

desiredPanelWidth = Ext.getBody().getViewSize().width;
desiredPanelHeight = Ext.getBody().getViewSize().height;

panelCmp.setPosition(0, 0, true);
panelCmp.floating = true;
panelCmp.constrainTo = Ext.get('main-content-port');


panelCmp.setWidth(parseInt(desiredPanelWidth));
panelCmp.setHeight(parseInt(desiredPanelHeight));
panelCmp.show();
panelCmp.doLayout();

}
}


Please help....Thanks in Advance....