Class Ext.layout.HBoxLayout

A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal space between child items containing a numeric flex configuration. The flex option is a ratio that distributes width after any items with explicit widths have been accounted for. In the code below, the width is calculated as follows:

• The fixed width item is subtracted, leaving us with 300 width
• The total flex number is counted, in this case, it is 3
• The ratio is then calculated, 300 / 3 = 100
• The first item has a flex of 2, so it is set to 2 * 100
• The other remaining item is set to 1 * 100

new Ext.Container({
    width: 400,
    height: 300,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        flex: 2,
        html: 'First'
    },{
        width: 100,
        html: 'Second'
    },{
        flex: 1,
        html: 'Third'
    }]
});