Class Ext.layout.VBoxLayout

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

• The fixed height item is subtracted, leaving us with 300 height
• 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: 300,
    height: 400,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        flex: 2,
        html: 'First'
    },{
        width: 100,
        html: 'Second'
    },{
        flex: 1,
        html: 'Third'
    }]
});