ExtJS4 Border布局简单案例

闲话少说，先上效果图

Extjs中border布局将界面分为东西南北以及中五个部分，可以根据需要来是否声明，但记住，中心区域一定要声明，而且中心区宽度是根据东西南北部分来自动调整的，

不需要设置宽度，如果你要设置宽度，你可以在东西南北部分来设置

实现代码：

<script type="text/javascript">
 Ext.onReady(function(){
   Ext.application({
        name:'测试Extborder布局!',
        launch:function(){
                Ext.create('Ext.panel.Panel',{
                    width:800,
                    height:600,
                    layout:'border',
                    items:[
                            {
                                title:'北部',
                                region:'north',//指定显示区域
                                html:'这是北部内容区',
                                height:100,
                                xtype:'panel',
                            },
                            {
                                title:'中心区',
                                region:'center',//布局一定要布局中心区，不然报错
                                html:'这是中心内容区',
                                height:400,//不要在中心区定义宽度,宽度是随其他区域而自适应
                            },
                            {
                                title:'西部区',
                                region:'west',
                                html:'<h3 style="color:red;">这是西部内容区</h3>',
                                height:400,
                                width:200,
                                split:true,//为true时宽度可以通过拖动调整。
                            },
                            {
                                title:'东部区',
                                region:'east',//布局一定要布局中心区，不然报错
                                html:'<h3 style="color:green;">这是东部内容区</h3>',
                                height:400,
                                width:50,
                            },
                            {
                                title:'南部区',
                                region:'south',
                                html:'<h3 style="color:blue;">这是南部内容区</h3>',
                                height:100,
                            },
                          ],//忘记写此逗号将不会显示，建议写一个属性时后面及时添加逗号
                        renderTo:Ext.getBody()
                });
        }
   });
 });
</script>