PDA

View Full Version : Resizing in border Layout does only maximize not minimize



madmax4000
22 Jul 2010, 5:05 AM
Hello,

I'm writing an application that uses a window with border layout to show 3 regions (west, south and center).
The reginons should be resizeable, and as far as I could see, "split: true" should do that trick.
But it does only allow to maximize west and south, so it's not possible to extend the center region.
Does anybody know why?





var splitTestWin = new Ext.Window({
id:'splitTestWin',
title:'splitTestWin Editor',
layout: 'border',
width: 1020,
height: 600,
items: [{
xtype: 'container',
region: 'west',
split: true,
layout: 'fit',
width: 250,
items:
new Ext.Panel({
title: 'Fit Layout',
layout:'fit',
items: {
title: 'Inner Panel',
html: '<p>This is the inner panel content</p>',
border: false
}
})
}, {
xtype: 'container',
region: 'center',
split: true,
layout: 'fit',
items:
new Ext.Panel({
title: 'Fit Layout',
layout:'fit',
items: {
title: 'Inner Panel',
html: '<p>This is the inner panel content</p>',
border: false
}
})
}, {
xtype: 'container',
region: 'south',
split: true,
layout: 'fit',
height: 200,
items:
new Ext.Panel({
title: 'Fit Layout',
layout:'fit',
items: {
title: 'Inner Panel',
html: '<p>This is the inner panel content</p>',
border: false
}
})
}],
closable:false
});
splitTestWin.show();

Animal
22 Jul 2010, 5:09 AM
Why do you use a Panel in a Panel in a Panel as a border region?

Instead of... a Panel???????

Condor
22 Jul 2010, 5:31 AM
1. Really overnested layout (as Animal already pointed out).
2. The center region takes up the space left by the other regions. It doesn't have a 'split' config option.

madmax4000
22 Jul 2010, 6:38 AM
Thanks for your fast reply.

@ Condor: For the config I read that "this configuration option is ignored if region='center'", so I did not write that, should I change?

It was just some content to give some live to the example, I can ofcause take the second panel out see below, the behaviour kepps the same.
One thing I forget to post, the issue exists only in IE, FF is perfect as always.



var splitTestWin = new Ext.Window({
id:'splitTestWin',
title:'splitTestWin Editor',
layout: 'border',
width: 1020,
height: 600,
items: [{
xtype: 'container',
region: 'west',
split: true,
layout: 'fit',
width: 250,
items:
new Ext.Panel({
title: 'Inner Panel',
layout:'fit',
html: '<p>This is the inner panel content</p>',
border: false
})
}, {
xtype: 'container',
region: 'center',
split: true,
layout: 'fit',
items:
new Ext.Panel({
title: 'Inner Panel',
layout:'fit',
html: '<p>This is the inner panel content</p>',
border: false
})
}, {
xtype: 'container',
region: 'south',
split: true,
layout: 'fit',
height: 200,
items:
new Ext.Panel({
title: 'Inner Panel',
layout:'fit',
html: '<p>This is the inner panel content</p>',
border: false
})
}],
closable:false
});
splitTestWin.show();

Animal
22 Jul 2010, 10:44 AM
Something screwy there. You can't shrink the south region! I've ever seen that before.

Animal
22 Jul 2010, 10:49 AM
But it's something to do with overnesting.

This works:



var splitTestWin = new Ext.Window({
title:'splitTestWin Editor',
layout: 'border',
width: 700,
height: 400,
items: [{
region: 'west',
title: 'Inner Panel',
split: true,
width: 250,
}, {
region: 'center',
title: 'Center'
}, {
region: 'south',
title: 'South',
split: true,
height: 200
}]
});
splitTestWin.show();

madmax4000
22 Jul 2010, 11:31 PM
Hi Animal,

thanks a lot for the solution.
I removed just the lines "xtype: 'container'," in all regions and tatata: it works.
So default type inside the border layout works, but not if I choose a container.
I thought the default would be container...
perfect now.

So thanks again and have a good weekend