javascript - What is meant by the 'flex' property of any ExtJS4 layout? - Stack Overflow

admin管理员组

文章数量:1287928

I have seen examples where some number is specified against flex, like say

{text: 'Actual', xtype : 'gridcolumn', dataIndex: 'some_data', flex: 1}

What is conveyed by this property? The documentation specified is a little difficult to understand, so a simpler explanation would greatly help!

I have seen examples where some number is specified against flex, like say

{text: 'Actual', xtype : 'gridcolumn', dataIndex: 'some_data', flex: 1}

What is conveyed by this property? The documentation specified is a little difficult to understand, so a simpler explanation would greatly help!

• javascript
• extjs4

Share Improve this question Follow asked Nov 23, 2011 at 11:48 UnosUnos 1,36122 gold badges1414 silver badges3535 bronze badges 1

• 1 I agree ! ExtJS4 Documentaion is very bad.... – Saurabh Bayani Commented Aug 28, 2014 at 6:26

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 19

To avoid using the documentation description, which you said you found a bit tricky:

Flex is used as a property in hbox and vbox layouts, and indicates the amount of space this component will take up in its parent container.

You can use any number greater than zero as a flex property value - some people like to use whole numbers for simplicity, others I've seen use values like 0.25 to more easily represent percentages.

A basic example of flex in action:

var myPanel = Ext.create('Ext.panel.Panel', {
    width: 100,
    height: 100,
    layout: {
        type: 'hbox',
        align: 'stretch' // Stretches child items to the height of this panel.
    },
    items: [{
        xtype: 'container',
        html: 'Container one!',
        flex: 5 // This takes up 50% of the container.
    }, {
        xtype: 'container',
        html: 'Container two!',
        flex: 3 // This takes up 30% of the container.
    }, {
        xtype: 'container',
        html: 'Container three!',
        flex: 2 // This takes up 20% of the container.
    }]
});

The key here is knowing that it's not the value of each flex that defines the layout, but how these values all relate to each other. If I added another container with a flex of 10 into this layout, that would take up half of the layout, since 10 is half of 10 + 5 + 3 + 2 = 20.

Hope that helps!

Lets consider an example for this, if there is a parent container having width as 100, and having three child element with following configs:

1st Element - width:70
2nd Element - flex:2
3rd Element - flex:1

So now, the engine will first allocate 70 to the first element. And then it will divide the remaining available width in the ratio of 2:1 and allocate 20 to second and 10 to third element.

Thus, flex is a way of specifying the relative widths among child elements. Also, just to add, heavy use of flex can create problem in fluid layouts given the fact that flex generally acts upon the remaining available width which can be even 0 if the total container width is reduced and this can lead to overlapping of fields. Example here.

It is used in the VBox and HBox layouts:

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

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

本文标签： javascriptWhat is meant by the 39flex39 property of any ExtJS4 layoutStack Overflow