Extjs4布局详解(二)—border布局

border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。

border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。

注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。

参数 split:true 可以调整除了center四个区域的大小。

参数 collapsible:true 将激活折叠功能， title必须设置，因为折叠按钮是出现标题部分的。

center 区域是必须使用的，而且center 区域不允许折叠。Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中，当指定布局为border时，没有指定center区域时，会出现报错信息。

示例代码：

Ext.create('Ext.panel.Panel', {
        width: 500,
        height: 400,
        title: 'MHZG.NET-Border Layout',
        layout: 'border',
        x:20,
        y:20,
        items: [{
            title: 'South Region is resizable',
            region: 'south',
            xtype: 'panel',
            height: 80,
            split: true,
            margins: '0 5 5 5'
        },{
            title: 'West Region is collapsible',
            region:'west',
            xtype: 'panel',
            margins: '5 0 0 5',
            width: 200,
            collapsible: true,
            id: 'west-region-container',
            layout: 'fit'
        },{
            title: 'Center Region',
            region: 'center',
            xtype: 'panel',
            layout: 'fit',
            margins: '5 5 0 0',
            html:'在Extjs4中，center区域必须指定，否则会报错。'
        }],
        renderTo: Ext.getBody()
    });