PDA

View Full Version : Column size 100%



dijksvi
21 Sep 2010, 5:20 AM
Hi,

I'm trying to define a Ext.Panel, with two columns, whereby the first column width is set to 100px and the second one to 100%. I hope that the second column will therefore size to the width of the container in which this panel is dropped.

Sofar I played with "width", "columnWidth", and various variations in a CSS. No matter what I do the second column refuses to size to the available width of the panels' container.

Using fixed sizes solves the issue, but I have various reasons why fixed sizes aren't an option for the solution we try putting in place.

Any hints/tips are welcome.

Thanks,

Vincent

Animal
21 Sep 2010, 5:33 AM
Use hbox layout. It's documented.

dijksvi
21 Sep 2010, 7:28 AM
With "hbox" things get indeed a bit better. This is what I tried and it seems to work:



var containerPanel = new Ext.Panel({
layout:'hbox',
width: 1000,
layoutConfig: {
align : 'stretchmax',
pack : 'start',
},
items: [
{html:'This is a sample text', width: 50},
{html:'This is a sample text', width: "100%"}
]
});


However, when I invert the order of the items, the "100%" takes immediate the entire width of its container. In other words, if the fixed size element is second, it won't be displayed. Any suggestions on how that can be solved ?

Tx,

Vincent

Animal
21 Sep 2010, 7:38 AM
I said it is documented. Which implied you should read the docs.

And width: 1000?

No. Use layouts all the way down from a Viewport.

dijksvi
21 Sep 2010, 1:41 PM
For a beginner it is not that easy to find your way in ExtJS. Luckely this video helped out: http://www.extjs.tv/index.php/2009/tgd-i-009-layouts-border-layout-5/

Thanks,

Vincent