ext border 布局

<div id="north-div"></div>
<div id="west-div"></div>
<div id="center-location"></div>
<div id='center-main'>
<div id="serviceconfig-menu"></div>
<div id="serviceconfig-illuminate"></div>
<div id="serviceconfig-main"></div>
<div id="serviceconfig-button"></div>
</div>
<div id="south-div">
XXXXXXXXXXXX
</div>
<div id="windows-div"></div>
<div id="combox-div"></div>
<div id="menu-div"></div>
</body>

var treePanel=new Ext.tree.TreePanel({
      region:'west',
   contentEl:'west-div',

//头布局
var northPanel = new Ext.BoxComponent({
     region:"north",
     el:"north-div",



//底布局
var southPanel = new Ext.BoxComponent({
     region:"south",
     el:"south-div",




Ext.onReady(function(){
   new Ext.Viewport({ //实例化布局对象
      layout:'border', //声明为border布局
      items:[northPanel,southPanel,{
      region:'center',
            layout:'fit',
            height:'100%',
            width:'100%',
            items:[{
            el:'center-location'
            },{
            el:'center-main'
            }]
      },treePanel]
   });
});