Border区域布局小实例

Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：
<script type="text/javascript">
Ext.onReady(function(){
   new Ext.Viewport({
        layout:"border",
        items:[{
            region:"north",
            heihgt:50,
            title:"顶部面板",
            split:true
        },{
            region:"south",
            heihgt:50,
            title:"底部面板",
            split:true
        },{
            region:"center",
            title:"中央面板",
            split:true
        },{
            region:"west",
             width:100,
            title:"左边面板",
            split:true
        },{
            region:"east",
             width:100,
            title:"右边面板",
            split:true
        }]
    });
});
</script>