ExtJs之Border布局

1. 任何使用border布局的容器都必须有一个子元素配置为region:'center'占据中心位置，该子元素会充满布局的剩余空间。
2. 任何占据west或east位置的子元素都必须知道初始化宽度、flex值或者百分比字符串，center的flex值为1。
3. 任何占据north或south位置的子元素都必须知道初始化高度、flex值或者百分比字符串，center的flex值为1。

Border布局在渲染完毕后不允许动态增加或删除子元素，如果需要必须通过附加的包装容器来操作。

Ext.layout.container.Border对应面板布局layout配置项的名称为Border。该布局包含多个子面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是：east（东）south（南）、west（西）、north（北）、center（中）。加入到容器中的子面板需要知道region配置项来告知容器要加入到那个部分，并且该布局还内建了对面板分格栏的支持。

<script type="text/javascript">   
Ext.onReady(function(){   
    Ext.create('Ext.panel.Panel',{   
        title:'Ext.layout.container.Border布局示例',   
        layout:'border',   
        frame:true,   
        height:450,   
        width:600,   
        renderTo:Ext.getBody(),   
        defaults:{//设置默认属性   
            collapsible:true  
        },   
        items:[{   
            title:'North Panel',   
            html:'上边',   
            region:'north',//指定子面板所在区域为north   
            height:80   
        },{   
            title:'South Panel',   
            html:'下边',   
            region:'south',//指定子面板所在区域为south   
            height:80   
        },{   
            title:'West Panel',   
            html:'左边',   
            region:'west',//指定子面板所在区域为west   
            width:150   
        },{   
            title:'east Panel',   
            html:'右边',   
            region:'east',//指定子面板所在区域为east   
            width:160   
        },{   
            title:'Main Content',   
            html:'中间',   
            region:'center'//指定子面板所在区域为center   
        }]   
    });   
});   
</script>