PDA

View Full Version : What does flex do?



nosarious
20 Jul 2010, 12:04 AM
No, seriously. I've been seeing it in a few places and all I can think of is a puny little class surrounded by divs, trying to do the whole 'muscle' pose so girls will help him with layouts and get him displayed...

so what does flex: 1 really mean?

evant
20 Jul 2010, 12:13 AM
It's a ratio:



new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: 'Foo',
style: 'border: 1px solid red;'
},{
flex: 5,
html: 'Bar',
style: 'border: 1px solid blue;'
}]
});


In the above, the blue panel takes up 5/6 of the height.

You can also mix in items with fixed height:



new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: 'Foo',
style: 'border: 1px solid red;'
},{
flex: 5,
html: 'Bar',
style: 'border: 1px solid blue;'
},{
html: 'Fixed at 200',
height: 200,
style: 'border: 1px solid green;'
}]
});


The blue panel now takes 5/6 of the remaining height, after the height of the fixed size item is allocated.

Animal
20 Jul 2010, 12:26 AM
This is a case where the Main ExtJS API docs include the configuration even though it's not technically a config of the layout, it's a config of the layout's child.

The Sencha Touch API docs don't include this because of the ambiguity as to where it should go. It's not really a config of the Panel class, so it's not right just to put it there? Maybe with a strong warning that it's only use by box layouts?

Anyway: http://www.sencha.com/deploy/dev/docs/?class=Ext.layout.VBoxLayout&member=flex

uxdan
20 Jul 2010, 5:19 AM
Maybe I'm just overlooking something simple (like leaving the panel to render without a height or flex), but is there a way to let the panel determine the height based on the content inside?

I'm more curious from a two panel vertical setup where the top box height is determined based on dynamic content.