PDA

View Full Version : [4.1.1a] Border layout with fixed width center and flexible east region


Werzi2001
6 Nov 2012, 7:42 AM
Hi,

i have a project where i need a border layout which has a fixed width center layout and a flexible width east layout. The obvious solution setting a width on the center region and none on the east region seems not to work:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all-gray.css"/>
<script type="text/javascript" src="./extjs/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var centerpanel = Ext.create('Ext.panel.Panel', {
region: 'center',
title: 'center',
width: 400
});

var eastpanel = Ext.create('Ext.panel.Panel', {
region: 'east',
title: 'east',
split: true,
collapsible: true
});

var viewport = Ext.create('Ext.container.Viewport', {
id: 'cont-viewport',
layout: 'border',
items: [centerpanel, eastpanel]
});
});
</script>
</body>
</html>

I cannot simply change the center region to be the west region and the east region to be the center region because i want to collapse the right panel to the right which seems only be possible if it also is the east region.

How can this be done? Thanks for your help.

Yours
Werzi2001
mitchellsimoens
8 Nov 2012, 7:49 AM
The way Border layout is designed, the center region is what floats the size so you will need to give the other regions a size.
Werzi2001
8 Nov 2012, 7:54 AM
But that is not what i want the layout to look like. Is there a different layout manager that has the possibility of having a fexible width right area which also is collapsible using the "mini split collapser"?
mitchellsimoens
8 Nov 2012, 7:56 AM
In your case the split bar should not be used. The center has a fixed width and the east should fill the remaining space. If the center has a fixed width then you won't be able to resize the east region unless the browser window changes.
Werzi2001
8 Nov 2012, 8:02 AM
The center has a fixed width and the east should fill the remaining space. If the center has a fixed width then you won't be able to resize the east region unless the browser window changes.

I don't think i understand your answer. You wrote "the center has a fixed width". That is what i have done in my test case (initial post) but it doesn't work.
mitchellsimoens
8 Nov 2012, 8:16 AM
I don't think i understand your answer. You wrote "the center has a fixed width". That is what i have done in my test case (initial post) but it doesn't work.

I don't think you fully understood my reply. Viewport has a set dimension (until you resize the browser) so if the center has a fixed width, the east will fill the remaining space and won't be able to resize because the center has a fixed width, the viewport has a fixed width.

To go further as it seems you aren't on the same page say the Viewport has 700px width and you want the center to have 400px width. That means the east region can only have 300px and cannot be resized because there is only 300px to be used, not 250, not 350.
Werzi2001
8 Nov 2012, 8:20 AM
Ah ok now i understand what you mean. But a viewport cannot be used withing a panel, can it? My sample code is only a small test case. Actually the layout construction has to work within the tab of a tab panel :(
Werzi2001
12 Nov 2012, 11:58 PM
Is there no way to get a layout that has the desired behaviour?
Werzi2001
15 Nov 2012, 12:10 AM
I solved the problem by manually updating the size of the east region on every resize.