PDA

View Full Version : How to make Column layout items fit the whole height?



peteris_b
25 Aug 2011, 3:36 AM
Hej!

I cant seem to find how to vertically stretch a panel's item, when the panel's layout is set to "column".

The idea is, that I use a panel where it's items are laid out in a "column" layout.
The amount of the items will vary from one-to-many, and the items have to be sized according to the "columnWidth" property.
If there is only one item it should vertically expand to fit the height of the panel, and if there are many items they should be with specific height size.

Currently if the items have a set height as a number, the height sizing works and the content is not hidden.
When trying to fit the items to the panels height in % or simply not setting the height at all, the panel's item content is hidden.


var elem = {simple tree grid component code};
var page = Ext.create('Ext.panel.Panel',{
id: 'tab-container',
name: 'tab-container',
layout: 'column',
items:[
{
columnWidth: 1,
height: 200, //accepts only number values, doesnt understand % values
items: elem
}
]
});

As far as I understand, the problem is with the way how I am inserting items into the panel.
Which is Panel->Column layout items->End items.

What could be the solution or alternatives for creating the described above?

I could set it up so that if there is only one item then it switches to the 'fit' layout. Still think there should be a possibility for the "column item" stretch either to the height of the parent or to the content of it.

skirtle
27 Aug 2011, 8:14 AM
Have you considered using an hbox layout instead?

peteris_b
28 Aug 2011, 11:53 PM
Yeah, have been trying all possible combinations, which would result in what I am trying to achieve.

The problem with the hbox layout, in my case, is that I cant seem to get the items to be positioned the same way as the column layout does.
Meaning that the hbox layout uses flex config to size and position its items, which doesnt have the same functionality as columnWidth config in the column layout.

The column layout in the end should have 3 columns, in which the items will be positioned, by specifying each item's columnWidth config.

Now the requirements for the column layout have changed a bit, now there will be two items as minimum in the column layout.
So that if there are only two items, the first has a specific height in px and the second one should expand to fill the rest of the panel which has the column layout.

skirtle
29 Aug 2011, 12:03 AM
So what happens if you switch from column to hbox and switch columnWidth to flex? Just change the names. Should be almost exactly the same.

If it doesn't work you'll have to explain what happens instead.

peteris_b
29 Aug 2011, 12:27 AM
If I switch to the hbox layout and use flex configs, then the items are positioned horizontally almost the same way as in column layout, just that the flex makes the items fit into the width of the panel.

Right now the two items that are inserted get columnWidth:.3, so if there is 3 columns, then the panel is divided into 3 and the two items are side by side.

/ ------item1------- / / ------item2------- / / ------empty------- /

But if I would set the first items columnWidth to 1 and the second item would get columnWidth:.5, then the second one should be moved below the first one.

/ ------item1------- /
/ --item2-- /

With the flex values, to my understanding, it will never happen like that, due to that it calculates the available width together with the flex values to scale the items.

So width the flex configs I end up with:
/ item1------ / item 2 /

skirtle
29 Aug 2011, 12:45 AM
I'm increasingly confused about what you're trying to do. It sounds like you're setting invalid columnWidth values and as luck would have it the resulting behaviour gives you a layout similar to the one you want.

Take a careful read of this:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Column

When you said you were using a "column" layout this is what I thought you meant. If you're not using it as documented then all bets are off, it could easily stop working in a future release or in an alternative browser.

You might have some success using a table layout but personally I never go near it as it always seems to go wrong. I don't have a good grasp of the layout you're aiming for but I suspect I'd do it using a combination of vbox and hbox.

peteris_b
29 Aug 2011, 1:02 AM
True that I want and I am using the column layout in a way that it hasnt been documented.

Will have to reconsider what I should use instead, to ensure that the layout wont break in future releases or browsers.

I have also tried to implement the layout by using the table layout, though havent had luck getting the result that I want.
But will give it a shoot once more and if no luck then the vbox and hbox layout combination.

Thanks for the help anyway!