PDA

View Full Version : Border Layout & Expand/Collapse



diablo
9 Mar 2012, 4:41 AM
Hello,

giving the following code:



Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
title: 'Page Title',
//html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
items:[{xtype: 'textfield', value: 'text1', fieldLabel: 'label1'},
{xtype: 'textfield', value: 'text2', fieldLabel: 'label2'}],
margins: '0 0 5 0'
}, {
region: 'center',
layout: 'border',
collapsible: true,
title: 'Navigation',
width: 150,
items: [
{
region: 'north',
title: 'North Panel',
collapsible: true,
//html: 'Information goes here',
//split: true,
height: 100,
minHeight: 100
}, {
region: 'center',
title: 'Center Panel',
collapsed: false,
collapsible: true,
//split: true,
width: 150
}, {
region: 'south',
xtype: 'panel',
title: 'South Panel',
}
]
}]
});


how can i force the center panel (the second one) to take the remaining space after collapse and expand?

Many thanks to the enlightening answer owner!

friend
9 Mar 2012, 5:03 AM
If I understand you correctly, removing collapsible: true from the panel titled 'Center Panel' will give you what you're after. The center region of a border layout is expected to consume all remaining space in its parent container and should not be set as collapsible.

diablo
9 Mar 2012, 5:25 AM
hi my friend,

actually i want the center panel to be collapsible. What i want to achieve with the center Panel, is what is happening currently with the North Panel. I will update the example maybe it will be a little more obvious.

Thanks!

diablo
14 Mar 2012, 11:46 AM
Hello again,

no further ideas...hmm complicated... i changed the orignal example with the one below, maybe so it will bring some enlightenment why the center panel doesn't want to expand on the remaining space.


Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
title: 'Page Title',
//html: '<h1 class="x-panel-header">Page Title</h1>',
autoHeight: true,
border: false,
items:[{xtype: 'textfield', value: 'text1', fieldLabel: 'label1'},
{xtype: 'textfield', value: 'text2', fieldLabel: 'label2'}],
margins: '0 0 5 0'
}, {
region: 'center',
layout: 'border',
collapsible: true,
title: 'Navigation',
width: 150,
items: [
{
region: 'north',
title: 'North Panel',
collapsible: true,
//html: 'Information goes here',
//split: true,
height: 100,
minHeight: 100
}, {
region: 'center',
title: 'Center Panel',
collapsed: true,
//collapsible: true,
tools:[{type: 'plus',
handler: function(evt, tool, panelHd){
panel = panelHd.ownerCt;
panel.expand();
panel.tools.plus.hide();
panel.tools.minus.show();
}
},
{type: 'minus',
hidden : true,
handler: function(evt, tool, panelHd){
panel = panelHd.ownerCt;
panel.collapse();
panel.tools.plus.show();
panel.tools.minus.hide();
}
}],
//split: true,
width: 150
}, {
region: 'south',
xtype: 'panel',
title: 'South Panel',
}
]
}]
});


Regards

friend
15 Mar 2012, 5:10 AM
From my previous post:



...The center region of a border layout is expected to consume all remaining space in its parent container and should not be set as collapsible...

diablo
15 Mar 2012, 5:29 AM
....
//collapsible: true,
.....


second code sample..