1. #1
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Boulder, CO
    Posts
    538
    Vote Rating
    10
    Answers
    12
    DavidThi808 will become famous soon enough

      0  

    Default Answered: What is flex?

    Answered: What is flex?


    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

  2. 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.

  3. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,120
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      1  

    Default


    Flex divides the avialable space according to the flex property. To get splitter between the panels, just use a border layout and set the
    Code:
    split
    on the innerpanels you want to be resizable.

  4. #3
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
    Answers
    106
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


    Also, see the documentation for the HBox or VBox layout for more information on the flex property.

  5. #4
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Boulder, CO
    Posts
    538
    Vote Rating
    10
    Answers
    12
    DavidThi808 will become famous soon enough

      0  

    Default


    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

  6. #5
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,120
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      1  

    Default


    See this example http://docs.sencha.com/extjs/4.2.1/e...tml?theme=gray

    push button Flex: Ratio / Align: top

    this is the code

    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.

  7. #6
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Boulder, CO
    Posts
    538
    Vote Rating
    10
    Answers
    12
    DavidThi808 will become famous soon enough

      0  

    Default


    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.

  8. #7
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,120
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      1  

    Default


    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.

  9. #8
    Touch Premium Member
    Join Date
    Oct 2011
    Posts
    24
    Vote Rating
    11
    Kyle2123 will become famous soon enough

      1  

    Default


    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.

  10. #9
    Sencha Premium Member
    Join Date
    Jun 2013
    Location
    Boulder, CO
    Posts
    538
    Vote Rating
    10
    Answers
    12
    DavidThi808 will become famous soon enough

      0  

    Default


    thank you

  11. #10
    Sencha User
    Join Date
    Jun 2013
    Posts
    2
    Vote Rating
    0
    anmol_1753 is on a distinguished road

      0  

    Default


    Hi,
    Can any one please tell me how can we set value in xtype:'filefield'?