PDA

View Full Version : Issue with collapsing Panel



alupuli
12 Nov 2009, 1:03 AM
Issue with collapsing Panel.
In below viewport west region got two items.
'Main Content1' and 'Main Content2' with collapse icon.
Collapsing 'Main Content2' allows 'Main Content1' to occupy 100% height.
But collapsing 'Main Content1' wont change height of 'Main Content2'.
How to achieve this.Whats wrong in this Code.
Thanks,


Ext.onReady(function () {
var view = new Ext.Viewport({
layout: 'border',
bodyStyle: 'padding:0px;',
items: [
{
region: 'north',
height: 27,
border: false,
margins: '0 0 0 0',
bodyStyle: 'padding:0px;',
layout: 'column',
items: [{
xtype: 'textfield',
bodyStyle: 'padding:0px;',
allowBlank: false,
vtype: 'alphanum',
width: 200
},
{
xtype: 'button',
bodyStyle: 'padding:0px;',
text: 'Search',
width: 20,
style: 'margin-left:10;'
}]
},
{
region: 'west',
title: 'Close Panel',
collapsible: true,
split: true,
width: '20%',
layout: 'border',
items: [{
layout: 'fit',
title: 'Main Content1',
region: 'center',
collapsible: true,
floatable: false,
autoScroll: true,
split: true,
height: Math.round(Ext.lib.Dom.getViewportHeight() * .4)
},
{
layout: 'fit',
title: 'Main Content2',
region: 'south',
collapsible: true,
floatable: false,
autoScroll: true,
split: true,
height: Math.round(Ext.lib.Dom.getViewportHeight() * .4)
}]
},
{
region: 'east',
collapsible: true,
title: 'Close panel',
width: 200
},
{
region: 'center',
//title:'Map',
layout: 'border',
items: [{
title: 'Main Content3',
region: 'center',
collapsible: true,
height: Math.round(Ext.lib.Dom.getViewportHeight() * .4)
},
{
title: 'Main Content4',
region: 'south',
collapsible: true,
floatable: false,
height: Math.round(Ext.lib.Dom.getViewportHeight() * .4)
}]
}]
});
}); < /script>

Animal
12 Nov 2009, 1:11 AM
You cannot collapse a center region.

Border layouts work by always having the center region occupy any space left over when other regions are collapsed, or resized in any way.

Animal
12 Nov 2009, 1:12 AM
What you want there is a north and center instead of center and south.

That way, you can collapse the north, and the lower, center region will expand into the space as I described in the last post.

alupuli
12 Nov 2009, 1:35 AM
thanks Animal,

but if I move 'center' to down it wont occupy space when collapse top 'north' region.
How to show both and collapse both if needed.
An accordian behaviour.

Animal
12 Nov 2009, 2:34 AM
Collapse both? Why? To see what, blank space there?

alupuli
12 Nov 2009, 3:03 AM
Its not about collapsing both same time. (i know it makes blank space).

But how to make one take 100% height on collapse of other one.

Animal
12 Nov 2009, 3:05 AM
Use accordion instead of border if you only want to see one at a time occupying all possible space.

alupuli
12 Nov 2009, 3:07 AM
But by default I want to show both expanded. that wont happen with accordian.
am I trying something impossible or not a well UI

Animal
12 Nov 2009, 3:17 AM
You need a custom layout based on accordion which allows >1 to be open and shares available height.

An interesting bit of development for you.