EXT JS6学习笔记(六)

1. The VBox layout

Ext.onReady(function() {
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        width: 700,
        height: 400,
        layout: {
            type: 'vbox',
            pack: 'start',
            align: 'stretch',
        },
        items: [{
            title: 'Item 1',
            html: 'Item 1',
            flex: 1
        }, {
            title: 'Item 2',
            html: 'Item 2',
            height: 100
        }, {
            title: 'Item 3',
            html: 'Item 3',
            flex: 2
        }]
    });
});

    2  The anchor layout

Ext.onReady(function() {
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        width: 700,
        height: 400,
        layout: 'anchor',
        items: [{
            title: 'Item 1',
            html: 'Item 1',
            anchor: '50%'
        }, {
            title: 'Item 2',
            html: 'Item 2',
            anchor: '-20 -200'
        }, {
            title: 'Item 3',
            html: 'Item 3',
            anchor: '-200'
        }]
    });
});