PDA

View Full Version : 3 Panels, top and bottom fix height, middle one to fill remaing space



remuera78
27 Jul 2010, 2:07 AM
Hi guys,

I thought it is a simple thing but apparently it is not:

I have three panels, where the top and bottom ones have fixed height, but how can I achieve that the middle one dynamically fills the remaining size.

The example (http://www.sencha.com/examples/explorer.html#rowlayout) works, but only if you specify an absolute size, but I don't want that. Any idea?

Thanks in advance for the help.

Cheers

Tim

sven
27 Jul 2010, 3:00 AM
What is not working on the example you linked? It is exactly doing what you want do do.

remuera78
27 Jul 2010, 4:20 AM
Hi Sven,

because in the example the absolute size is specified, but that is what I want to avoid. It's no problem to specify the height of the first and the last panel, but tell the middle panel to fill the whole space between. If I give the panel in the middle a FitLayout or set the height to 100% the bottom panel is "gone".

It seems like such a simple problem, but I used VBoxLayout, BorderLayout and RowLayout, but they all need an absolute size. Am I overseeing something?

Thanks in advance :-)

Cheers

Tim

sven
27 Jul 2010, 4:28 AM
There is no size specified for the panel in the center in the example you linked

remuera78
27 Jul 2010, 5:08 AM
But that is exactly my problem. How do I specify the size of the middle panel without giving it an absoulte height? setHeight("100%") does not work, but setHeight(500). How can I make the middle panel fill the space between top and bottom panel without knowing its absolute size?

sven
27 Jul 2010, 5:10 AM
The example is doing this.

RowData(1,1); is saying that it should use all space that is there

remuera78
27 Jul 2010, 5:22 AM
Correct, the example is doing that, if you specify an absolute size of the panel with setSize(400, 300). But my problem is that I don't know how much the height is, so I am looking for a way not having to specify the height.

How would you do it if you want to display three panels above each other. The first one having a height of 30 pixels and starts at the very top of the browser window, then a middle panel and then a bottom panel with a fixed height of 30 pixels that should end at the bottom of the browser window. The middle panel should consume the rest between. Any idea?

sven
27 Jul 2010, 5:23 AM
Have you looked at the eamples? The inner components are nto sized and still, the middle one takes the full space that is remaining..

sven
27 Jul 2010, 5:25 AM
How would you do it if you want to display three panels above each other. The first one having a height of 30 pixels and starts at the very top of the browser window, then a middle panel and then a bottom panel with a fixed height of 30 pixels that should end at the bottom of the browser window. The middle panel should consume the rest between. Any idea?

Use a Viewport with a RowLayout, add three components into it. First as a RowData of RowData(1,30), second of RowData(1,1) and third of RowData(1,30).

All this is covered in the example you linked.

remuera78
27 Jul 2010, 8:02 AM
Hi Sven,

thank you for your efforts, I finally found the problem. I had the three panels described above in a hierachy of different other outer panels and one of them was causing my bottom panel to "disappear". Lesson learned.

Cheers

Tim