PDA

View Full Version : filling whole page with layouts



spoggle
22 Jun 2011, 11:41 AM
Hi,

I'm new to this, apologies if this is something really blatant that I'm missing:

I am working on a layout where there are three columns, the left most is split vertically into two. I need to use all the area on the screen so am starting with a Viewport. I need to specify the width of each column in percentage while the vertical split in the left most column splits the height 50/50.

I've tried lots of different layouts (hbox, vbox, border, etc.), and have come up with some that work vertically but not horizontally or vice versa. My current best effort looks like this:



var rootWin = new Ext.Viewport({
id: rootWin,
layout: 'column',
layoutConfig: {
align: 'stretch',
pack: 'start'
},
defaults: {
height: 400
},
border: false,
items :[
{
columnWidth: .5,
border: false,
title: 'data',
layout: 'vbox',
layoutConfig: {
pack: 'start',
align: 'stretch'
},
items: [
{ html: 'HR', flex: 1 },
{ html: 'RR', flex: 1 }
]
},
{
columnWidth: .4,
title: 'center',
html: 'center',
},
{
columnWidth: .1,
title: 'east',
html: 'east',
},
]
});


but this only gets me a 400px high fixed size box - if I try 100% there, the center and right columns collapse to just the text size and the left column disappears entirely except for the title.

Any ideas on how to make the height fill the page would be appreciated.

thanks!

skirtle
23 Jun 2011, 5:36 PM
See http://dev.sencha.com/deploy/ext-3.4.0/examples/ for more examples of layouts.


new Ext.Viewport({
items: [
{
flex: 1,
items: [
{
flex: 1,
title: 'Top left'
}, {
flex: 1,
title: 'Bottom left'
}
],
layout: {
align: 'stretch',
type: 'vbox'
}
}, {
flex: 1,
title: 'Middle'
}, {
flex: 1,
title: 'Right'
}
],
layout: {
align: 'stretch',
type: 'hbox'
}
});

spoggle
24 Jun 2011, 3:32 PM
Thanks for the reply - the solution, however, does not maintain the required relationship in the size of the columns.

What I currently have working is to use a column layout (with a vbox in the left column) and I catch the resize event for the viewport and reset the height of each column.

I am wondering if there's not some bug in 3.4 or chrome - the vertical resizing works perfectly in all the cases I've tried, but the horizontal resize misbehaves. If I shrink the width, the resize always works, but expanding it usually results in the column not changing width. Also changing both height and width seems to cause great hiccups somewhere - the resizing after that seems to wedge.

Thanks again!

skirtle
24 Jun 2011, 9:49 PM
Thanks for the reply - the solution, however, does not maintain the required relationship in the size of the columns.

It was just an example. Tweaking it to change the column widths is very easy if you just read the docs & examples for the settings I've used.