PDA

View Full Version : layout problem



kclerc
4 Nov 2010, 3:53 AM
Hallo everyone

I want a panel Layout with a norht, center and east region.
The thing is, in the north panel i need 2 panels, which are collapsable.
When i collapse one of these 2 north panels, the center should adjust the height for the new space from the collapsed north panel.

Has anyone any idea how I could do that?

Thanks a lot

Condor
4 Nov 2010, 4:18 AM
Try a nested border layout:

{
layout: 'border',
items: [{
region: 'north',
title: 'North panel 1',
collapsible: true,
height: 100
},{
region: 'center',
xtype: 'container',
layout: 'border',
items: [{
region: 'north',
title: 'North panel 2',
collapsible: true,
height: 100
},{
region: 'center',
title: 'Center panel'
}]
}
}

kclerc
4 Nov 2010, 4:34 AM
thanks

how would it look in a viewport?

Condor
4 Nov 2010, 4:35 AM
Just try it!

kclerc
4 Nov 2010, 5:03 AM
23135my code looks like:


Ext.onReady(function() {

new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
title: 'North panel 1',
collapsible: true,
height: 100
},{
xtype: 'container',
layout: 'border',
items: [{
region: 'north',
title: 'North panel 2',
collapsible: true,
height: 100
}]
},{
region: 'center',
title: 'center'
}]
});
});but the north Panel 2 is not at the correct place...
it should be under the north panel 1

Condor
4 Nov 2010, 5:16 AM
No, that's not what I posted. You moved the center region.

kclerc
4 Nov 2010, 5:20 AM
Ext.onReady(function() {

new Ext.Viewport({
layout: 'border',
items: [{
region: 'north',
title: 'North panel 1',
collapsible: true,
height: 100
},{
xtype: 'container',
layout: 'border',
items: [{
region: 'north',
title: 'North panel 2',
collapsible: true,
height: 100
},{
region: 'center',
title: 'Center panel'
}]
}]});
});

if I make like this, then an error comes with the message that no center region is defined for the BorderLayout

Condor
4 Nov 2010, 5:22 AM
You're missing one single line from my example. The xtype:'container' also needs to be region:'center'.

kclerc
4 Nov 2010, 5:24 AM
thanks a lot, now it works =)