PDA

View Full Version : hbox layout: First item = min width, second item = max width?



Plasma
4 Oct 2010, 4:55 PM
Hi,

I was wondering earlier today how I would go about using the hbox layout (which I assume is the right one for this instance) in rendering a layout that contained two items.

The first item was a Panel, and within the Panel would be a variable-width amount of items (and so the panel should resize itself to a certain width automatically - I had hoped).

The second item was another Panel, but I wanted it to take up the remaining width of the container.

I tried simply adding the first panel with no flex or fixed width attribute, and then tried placing the second panel with flex: 1 to try and take up the remainder of the space.

The results were not desirable; instead of the first panel just taking up 'enough space' that it needed to show its inner contents, it was either hidden because of the second flex: 1 or some other problem.

What is the correct way to:
* Show two columns in the container
* The first column should take up as least amount of space as possible (depending on its item contents - which also may be dynamic in width, etc)
* The second column should take up the remainder of the space

I get the feeling I need to tell ExtJS that an item should either have a fixed width, or tell it to take up a ratio of the available container space. There doesn't seem to be a way to say 'take up as much space as you need, but nothing more'.

Cheers

Animal
4 Oct 2010, 10:36 PM
How is auto width to be determined? Can you think of a way?

Plasma
5 Oct 2010, 12:01 AM
I'd like it to use whatever logic the browser users - for example:

1) The left item is a table (actually, is a Panel with table layout) and it contains a few rows/columns. I'd like this to be as large as possible but nothing larger.

2) The right item can take up the full width.

If I simply had two div's (or perhaps the first was a span with display: block) and floated them to the left; it would work as expected.

Not sure how to do the same w/ ExtJS.

Condor
5 Oct 2010, 12:23 AM
ColumnLayout or Animal's FloatLayout would probably work.