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区域时，会出现报错信息。

示例代码：

 

1. Ext.create('Ext.panel.Panel', {
2.         width: 500,
3.         height: 400,
4.         title: 'MHZG.NET-Border Layout',
5.         layout: 'border',
6.         x:20,
7.         y:20,
8.         items: [{
9.             title: 'South Region is resizable',
10.             region: 'south',
11.             xtype: 'panel',
12.             height: 80,
13.             split: true,
14.             margins: '0 5 5 5'
15.         },{
16.             title: 'West Region is collapsible',
17.             region:'west',
18.             xtype: 'panel',
19.             margins: '5 0 0 5',
20.             width: 200,
21.             collapsible: true,
22.             id: 'west-region-container',
23.             layout: 'fit'
24.         },{
25.             title: 'Center Region',
26.             region: 'center',
27.             xtype: 'panel',
28.             layout: 'fit',
29.             margins: '5 5 0 0',
30.             html:'在Extjs4中，center区域必须指定，否则会报错。'
31.         }],
32.         renderTo: Ext.getBody()
33.     });