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>

效果图