PDA

View Full Version : What is flex?



DavidThi808
17 Jun 2013, 3:08 PM
Hi all;

I see a lot of times The answer is set flex=1, but what is it and what does it do? I can't find that?

And what I think is an associated question, when I have 3 panels inside a parent panel - west, center, & east - how do I get it to have splitter bars between each panel?

thanks - dave

tvanzoelen
18 Jun 2013, 1:15 AM
Flex divides the avialable space according to the flex property. To get splitter between the panels, just use a border layout and set the
split on the innerpanels you want to be resizable.

friend
18 Jun 2013, 4:29 AM
Also, see the documentation for the HBox (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.HBox) or VBox (http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.VBox) layout for more information on the flex property.

DavidThi808
18 Jun 2013, 5:35 AM
Hi;

Thank you on the split - works great. On flex, I read the HBox and VBox documentation and it says to set flex, but not what it does or what value I should set for what use. I'd like to understand what it does so I know when to use it. Right now it's more of a magical thing I set when told to - and that leaves me having to always ask what to do instead of figuring it out myself.

thanks - dave

tvanzoelen
18 Jun 2013, 5:46 AM
See this example http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/layout/hbox.html?theme=gray

push button Flex: Ratio / Align: top

this is the code


items:[{
xtype:'button',
text: 'Button 1',
flex:1
},{
xtype:'button',
text: 'Button 2',
flex:1
},{
xtype:'button',
text: 'Button 3',
flex:1
},{
xtype:'button',
text: 'Button 4',
flex:3,
margin: 0
}]

button 4 has flex 3 the others 1. Button 4 is equal in width with (button 1 + 2 + 3)
Its a ratio how to divide the available space between the components.

DavidThi808
18 Jun 2013, 6:20 AM
Oh, so it's a width ratio. Ok, that makes a lot of sense.

Is this documented anywhere? In other words, am I just not finding info I should be able to find myself?

Thank you.

tvanzoelen
18 Jun 2013, 6:29 AM
There is not much documentation about it. This is in the API


This configuration option is to be applied to child items of the container managed by this layout. Each child item with a flex property will be flexed (horizontally in hbox, vertically in vbox) according to each item's relative flex value compared to the sum of all items with a flex value specified. Any child items that have either a flex = 0 or flex = undefined will not be 'flexed' (the initial size will not be changed).

Basically it sums up all flex numbers, for example 6. When a component has flex 2. It gets a 2/6 part of the available width or height assigned.

Flex is a property of the Box layout.

Kyle2123
18 Jun 2013, 10:17 AM
Usually you'll use flex in one of two ways -

1. You have a few components that have a fixed size, and then you have one that needs to use up whatever space is left. In this case, the fixed size components have width or height set, and then the component that needs to eat the rest of the space just needs ANY value set for flex. Since size of flexed items is calculated by adding all of the items with flex up and then dividing to get ratio, anything works. Usually you will see people use "1" for this.

2. You are using proportional sizing for all of the components in the container. ie, columns in a grid header that you want to remain proportional regardless of window size. In that case you'd use flex on all of the columns. It's easiest to use numbers that make sense to you. For example, if you had multiple columns, and the flex on all the columns added to 100, then the flex on each column would be equivalent to the percentage of the space it should have. ie, 4 columns, each taking up 25% of the space ... set the flex to 25 for each. That makes it easier to read the code and know what is going on without having to total everything up and calculating a ratio.

DavidThi808
18 Jun 2013, 10:19 AM
thank you

anmol_1753
21 Jun 2013, 7:23 AM
Hi,
Can any one please tell me how can we set value in xtype:'filefield'?