布局Layout的一些概念：区域（region）：任何一个封闭的DOM元素，例如body，div，span等布局管理器（layout manager）：负责管理页面中的区域。在Ext中布局管理的主要的用户组件是BorderLayout类。在BorderLayout中划分好了一些预定的区域。可用的区域分别有south, east, west, north,和center。每一个BorderLayout对象都提供这些区域，但只有center要求必须使用的。面板（Panel）：是区域管理（region management）的另外一个组件。面板也相当于一个容器，它将页面元素（div等）与布局layout中的区域进行关联。 使用示例一：简单的布局使用说明：第一步：创建BorderLayout对象layout，并指定layout的容器为document.body，在这个layout中包括四个区域，分别对应BorderLayout预置的north、south、west和center，对于每一区域都可以进行各种属性的设置，包括宽度、是否带有标题、是否可伸缩等等，代码示例如下js 代码

var layout = new Ext.BorderLayout(document.body, {   
1.     north: {   
        split:false,   
2.         initialSize: 35   
    },   
3.     south: {   
        split:false,   
4.         initialSize: 20   
    },   
5.     west: {   
        split:false,   
6.         initialSize: 200,   
        collapsible: false 
7.     },   
    center: {   
8.         autoScroll: true 
    }   
9. });   

第二步：为layout填充内容，分别为north、south、west和center填充了相应的内容面板ContentPanel，layout.beginUpdate()和layout.endUpdate()表示在其间的添加过程中先不要对加入的对象排版布局。这样的好处是避免了ContentPanel有对象加入时，导致UI的刷新，改进了整体的用户体验。如下所示：js 代码

layout.beginUpdate();   
1. layout.add('north', new Ext.ContentPanel('header', {fitToFrame:true}));   
layout.add('south', new Ext.ContentPanel('footer', {fitToFrame:true}));   
2. layout.add('west', new Ext.ContentPanel('nav', {fitToFrame:true}));   
layout.add('center', new Ext.ContentPanel('content'));   
3. layout.endUpdate(); 

第三步：页面区域内容，在html页面中可以通过div进行区域内容设置，如下html代码

<div id="header" class="x-layout-inactive-content"> 
1.     ......   
</div> 
2. <div id="nav" class="x-layout-inactive-content"> 
    ......   
3. </div> 
<div id="content" class="x-layout-inactive-content"> 
4.       ......   
</div> 
5. <div id="footer" class="x-layout-inactive-content"> 
      ......   
6. </div> 

效果图如下： 使用示例二：嵌套的布局嵌套的布局可以通过在BorderLayout里面添加BorderLayout来实现，这中间需要NestedLayoutPanel来对里面的BorderLayout包装，代码示例如下：js 代码

var layout = new Ext.BorderLayout(document.body, {   
1.     west: {   
        split:true,   
2.         initialSize: 200,   
        titlebar: true,   
3.         collapsible: true,   
        minSize: 100,   
4.         maxSize: 400   
    },   
5.     center: {   
        autoScroll: false 
6.     }   
});   
7. layout.beginUpdate();   
   
8. layout.add('west', new Ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));   
var innerLayout = new Ext.BorderLayout('content', {　//嵌套的layout   
9.     south: {   
        split:true,   
10.         initialSize: 200,   
        minSize: 100,   
11.         maxSize: 400,   
        autoScroll:true,   
12.         collapsible:true,   
        titlebar: true 
13.     },   
    center: {   
14.         autoScroll:true 
    }   
15. });   
innerLayout.add('south', new Ext.ContentPanel('inner1', "More Information"));   
16. innerLayout.add('center', new Ext.ContentPanel('inner2'));   
layout.add('center', new Ext.NestedLayoutPanel(innerLayout));　//嵌套包装   
17. layout.endUpdate();   

Layout布局属性说明（自己的理解翻译可能不准确）：split:true, 边框是否可以拖动initialSize: 200, 初始大小titlebar: true, 是否带有标头栏collapsible: true, 是否可以卷缩minSize: 100, 最小大小maxSize: 400 最大大小 页面效果如：