What is meant by the 'flex' property of any ExtJS4 layout?

Question

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!

Answer 1

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!