PDA

View Full Version : How to force a panel to overlap over other



jksnu
6 Sep 2013, 4:23 AM
I am creating a panel with border layout as follows:




Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
width: 500,
height: 200,
title: 'Border Layout',
layout: 'border',
items: [
{
title: 'North Region ',
region: 'north',
xtype: 'panel',
height:50,
},
{
title: 'Center Region',
region: 'center',
xtype: 'panel',
flex:1,
collapsed: true,
collapsible: true
},
{
title: 'South Region',
region: 'south',
xtype: 'panel',
layout: 'vbox',
flex:1,
items:[{
xtype: 'label',
text: 'Not Important'
},{
xtype: 'label',
text: 'Not Important'
},{
xtype: 'label',
text: 'Not Important'
},{
xtype: 'button',
text: 'Click'
}]
}],
renderTo: Ext.getBody()
});
});




In this code whenever i am expanding the center panel, the south panel is being shifted towards bottom and thus the Button on the south panel is not visible.
I am trying to do such that if I expands the center panel, it comes over the south panel instead of shifting it towards bottom, so that I can see the Button.

Please suggest me any attribute of Panel that can help me.

ettavolt
6 Sep 2013, 5:02 AM
Border layout does not support such behavior. You want to try Accordion layout or make center item floating.