PDA

View Full Version : Complex border layout with collapsible panels - header stretched



MaciejZabielski
5 Oct 2012, 6:07 AM
Hi, I;m having a problem with this layout. I have created a test viewport to illustrate the behavior In my application I have separate classes for each view that actually contain grids, tree panels etc.

Run the code and try to collapse left bottom panel. It's header will be stretched after collapse that will not actually work. Can someone tell me if I'm doing something wrong here, or is this layout too complicated?
I have also attached a screenshot that shows the problem.
Thanks!



Ext.define('MyApp.view.MyViewport', { extend: 'Ext.container.Viewport',


layout: {
type: 'border'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'panel',
flex: 1,
region: 'west',
split: true,
width: 150,
layout: {
type: 'border'
},
collapsible: true,
hideCollapseTool: true,
title: 'My Panel',
items: [
{
xtype: 'treepanel',
region: 'north',
split: true,
height: 150,
collapseDirection: 'top',
collapsible: false,
title: 'My Tree Panel',
viewConfig: {


}
},
{
xtype: 'panel',
region: 'center',
collapseDirection: 'bottom',
collapsible: true,
title: 'My Panel'
}
]
},
{
xtype: 'panel',
flex: 3,
region: 'center',
split: true,
layout: {
type: 'border'
},
header: false,
title: 'My Panel',
items: [
{
xtype: 'tabpanel',
region: 'north',
split: true,
height: 150,
collapseDirection: 'top',
collapsible: true,
activeTab: 0,
items: [
{
xtype: 'panel',
layout: {
type: 'fit'
},
title: 'Tab 1',
items: [
{
xtype: 'gridpanel',
frameHeader: false,
header: false,
title: 'My Grid Panel',
hideHeaders: false,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'string',
text: 'String'
},
{
xtype: 'numbercolumn',
dataIndex: 'number',
text: 'Number'
}
],
viewConfig: {


}
}
]
},
{
xtype: 'panel',
title: 'Tab 2'
},
{
xtype: 'panel',
title: 'Tab 3'
}
]
},
{
xtype: 'panel',
region: 'center',
split: true,
title: 'My Panel'
}
]
}
]
});


me.callParent(arguments);
}


});

MaciejZabielski
5 Oct 2012, 6:12 AM
SOLVED: ok, my mistake I guess. I have realized, that if I set top panel to Region: Center (to fill the screen) and bottom panel to Region : South it will work correctly (In the posted code, top panel is "north" and bottom panel is "center").

scottmartin
5 Oct 2012, 6:22 AM
The center region is not meant to be collapsible, just all other regions surrounding it.

Scott.