PDA

View Full Version : Column Layout window resize problem



artalat
12 Jul 2009, 11:12 AM
Hi, im a beginner and just starting to learn ext. Ive run into a problem and cant really seem to either find or understand the solution. Ive made a column panel with 3 columns. 2 columns have a fixed size while the third one is supposed to cover the rest of the space. This works just fine, but when i resize the browser window the column dont adjust automatically to the new size.

Thanks in advance.



var myPanel = new Ext.Panel(
{
layout : "column",
renderTo: "main",
title: "Column Panel",

items :
[{
title : false,
border: false,
width: 210,

items :
[{
xtype : "panel",
title : "Panel",
html : "hello there",
}]
},{
title : false,
border: false,
columnWidth:1,
items :
[{
xtype : "panel",
title : "Panel",
html : "hello 1",
},{
xtype : "panel",
title : "Panel",
html : "hello 2",
}]
},{
title : false,
border: false,
width: 210,
items :
[{
xtype : "panel",
title : "Panel",
html : "hello there",
}]
}]
});
Also i noticed if i do var myPanel = new Ext.Viewport instead that does the trick.

13 Jul 2009, 4:46 AM
you columnWidths need to be relative.

In fact, have you considered using the hbox layout?

Animal
13 Jul 2009, 4:51 AM
What do you expect? Why would a Panel do anything in particular on Window resize? Panel is a general purpose Panel class.

You must use a Viewport.

artalat
13 Jul 2009, 9:58 AM
you columnWidths need to be relative.

In fact, have you considered using the hbox layout?

ok thanks! ill look into hbox layout.

But basically what i want to two fixed width columns, and one variable size with a minWidth. So when the browser window is resized the column width is adjusted accordingly, but when it reaches minWidth limit, browser scrollbars are shown.

What would be the best way to go about something like this? I hope im making my point clear :s.

Thanks

Animal
13 Jul 2009, 9:58 AM
A Viewport with layout: 'hbox'