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必须设置，因为折叠按钮是出现标题部分的。

<script type="text/javascript">
			
			Ext.application( {
					name:"HelloExt", 
					launch:function() {
						Ext.create(
							'Ext.panel.Panel',//创建一个Panel
							{
								title:'border_test',
								renderTo:Ext.getBody(),
								width:1200,
								height:700,
								layout:'border',	//布局为border
								defaults: {
							        split: true,	//有分割线
							        collapsible: true,	//可以折叠
							        bodyStyle: 'padding:15px'
							    },
								items:[ //此处不要忘了“:”号
									{
										region:'north',
										title:'北',
										xtype:'panel',
										height:100,
										html:'北部'
									}, {
								        region: 'west',
								        title: '西',
								        xtype: 'panel',
								        html: "西部",
								        width: 100
								 
								    },{
										region:'east',
										title:'东',
										xtype:'panel',
										width:50,
										html:'东部',
									},{
										region:'center',
										title:'中',
										xtype:'panel',
										html:'中部',
									}, {
								        region: 'south',
								        title: '南',
								        xtype: 'panel',
								        html: "南部",
								        height: 70
								    }
								]
							}
						)
					}
				}
			)
		</script>

效果图