Layout基本功能介绍

1、border布局方式
                var viewport = new Ext.Viewport({
                    layout: 'border',
                    items: [{
                        region: 'north',
                        height: 40,
                        html: '<h1>www.family168.com出品</h1>'
                    }, {
                        region: 'west',
                        width: 100,
                        html: '<p>菜单1</p><p>菜单2</p>'
                    }, {
                        region: 'center',
                        html: '主要内容'
                    }]
                });


2、fit布局方式，仅仅允许一个控件，让控件进行自适应，通常可与border布局方式结合使用，让grid进行自适应空间调整
    var viewport = new Ext.Viewport({
        layout: 'fit',
        items: [grid]
    });


3、border 可以进行调整
    { region: 'west', html: 'west', width: 100, split: true }




4、border 布局方式可以进行窗体收缩
            { region: 'west', html: 'west', title: 'west', width: 100, collapsible: true }


5、column 布局方式
    var viewport = new Ext.Viewport({
        layout:'column',
        items: [{
            title: 'Column 1',
            width: 120
        },{
            title: 'Column 2',
            columnWidth: .7
        },{
            title: 'Column 3',
            columnWidth: .3
        }]
    });