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>