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

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()
	});