我们都知道java中有布局管理器的概念，通过调整布局器可以简化我们对可视组件的管理。而在Ext中同样提供了自己的布局实现，以简化web界面的开发与定制。

如下图所示，Ext的Layout可分解为东、西、南、北、中5个基本区域。
ExtJS2.0开发与实践笔记[2]——Ext中的Layout

在ExtJS2.0实现中，我们可以写成如下代码样式。ExtJS2.0配置方法如下：初识ExtJS

LayoutExt.js
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout/**//**
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * <p>Title: LoonFramework</p>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * <p>Description:Ext的Layout用例</p>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * <p>Copyright: Copyright (c) 2008</p>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * <p>Company: LoonFramework</p>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * <p>License: [url]http://www.apache.org/licenses/LICENSE-2.0</p>[/url]
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * @author chenpeng
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * @email：[email][email protected][/email]
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * @version 0.1
ExtJS2.0开发与实践笔记[2]——Ext中的Layout */
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的LayoutLayoutExt = function()...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    //设定布局器及面板
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    //Ext1.1为Ext.BorderLayout
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    var Viewport = Ext.Viewport;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    //变量设置
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    var root;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    var layout;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    //返回LayoutExt操作结果到onReady
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout    return ...{
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout        init: function()...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            root = this;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            //初始化Ext状态管理器，此类可返回用户在Cookie中的操作状态
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout            layout = new Viewport(...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                //布局方式，'border'
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                layout: 'border',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                items: [ //北      
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout                ...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    region: 'north', //显示区域
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    contentEl: 'north', //绑定的content
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    title: 'North', //名称
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    split: false,//分割线
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    collapsible: true, //是否允许折起
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    //在ie下无此项会报错(firefox无事……),默认分别为此布局左、上、右、下的边距,以此防止越界造成的崩溃。
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    //也可写作 'Object:数值'的形式，如 margins：{top: 0, left: 0, right:0, bottom: 0}
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    margins: '0 0 0 0' 
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                }, //西            
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout                ...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    region: 'west', //显示区域
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    contentEl: 'west', //绑定的content
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    title: 'West', //名称
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    split: true,//分割栏
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    width: 80, //宽
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    margins: '0 0 0 0' //在ie下无此项会报错
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                }, //东
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout                ...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    region: 'east', //显示区域
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    contentEl: 'east', //绑定的content
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    title: 'East', //名称
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    width: 80,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    split: true,//分割栏
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    margins: '0 0 0 0' //在ie下无此项会报错
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                }, //南             
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout                ...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    region: 'south', //显示区域
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    contentEl: 'south', //绑定的content
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    title: 'South', //名称
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    split: true,//分割栏
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                    margins: '0 0 0 0' //在ie下无此项会报错
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                }, //中
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout                 new Ext.TabPanel(...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    region: 'center',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    deferredRender: false,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    activeTab: 0, //活动的tab索引
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    items: [...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                        contentEl: 'center1',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                        title: '中央区域1',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                        closable: true, //关闭项
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                        autoScroll: true //是否自动显示滚动条
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    }, ...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                        contentEl: 'center2',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                        title: '中央区域2',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                        autoScroll: true
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    }]
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                 })
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                ]
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            });
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        }
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    };
ExtJS2.0开发与实践笔记[2]——Ext中的Layout}
ExtJS2.0开发与实践笔记[2]——Ext中的Layout();
ExtJS2.0开发与实践笔记[2]——Ext中的Layout//加载onReady
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExt.onReady(LayoutExt.init, LayoutExt, true);
ExtJS2.0开发与实践笔记[2]——Ext中的Layout


LayoutExt.html(定义html页面，设定及引用ext)
ExtJS2.0开发与实践笔记[2]——Ext中的Layout<html>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <head>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        <title>LayoutExt</title>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        <!--加载ExtJs资源-->
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout        <script type="text/javascript" src="adapter/ext/ext-base.js">...
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        </script>
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout        <script type="text/javascript" src="ext-all.js">...
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        </script>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        <!--我的js-->
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout        <script type="text/javascript" src="LayoutExt.js">...
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        </script>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        <!--样式-->
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout        <style type="text/css">...
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout            html, body {...}{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                font: normal 12px verdana;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                margin: 0;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                padding: 0;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                border: 0 none;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                overflow: hidden;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                height: 100%;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            }
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        </style>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    </head>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <body>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        <div id="north" class="x-layout-inactive-content">
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            北方
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        </div>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        <div id="west" class="x-layout-inactive-content">
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            西方
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        </div>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        <div id="east" class="x-layout-inactive-content">
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            东方
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        </div>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        <div id="south" class="x-layout-inactive-content">
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            南方
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        </div>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        <div id="center1" class="x-layout-inactive-content">
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            中央区域1
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        </div>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        <div id="center2" class="x-layout-inactive-content">
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            中央区域2
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        </div>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    </body>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout</html>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout

显示效果如下图：
ExtJS2.0开发与实践笔记[2]——Ext中的Layout

我们可以看到，Ext2.0的布局实际上是利用json进行元素标识后在dom元素上嵌套实现的，所以我们也可以很简单的将其他组件插入到layout中去。

LayoutExt2.js
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout/**//**
ExtJS2.0开发与实践笔记[2]——Ext中的Layout *
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * <p>Title: LoonFramework</p>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * <p>Description:Ext的内部Layout嵌套用例</p>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * <p>Copyright: Copyright (c) 2008</p>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * <p>Company: LoonFramework</p>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * <p>License: [url]http://www.apache.org/licenses/LICENSE-2.0</p>[/url]
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * @author chenpeng
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * @email：[email][email protected][/email]
ExtJS2.0开发与实践笔记[2]——Ext中的Layout * @version 0.1
ExtJS2.0开发与实践笔记[2]——Ext中的Layout */
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的LayoutExt.onReady(function()...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    //设定布局器及面板
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    var layout;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    var Pane=Ext.Panel;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    var Border=Ext.Viewport;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    //初始化Ext状态管理器，此类可返回用户在Cookie中的操作状态
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    //生成内部布局
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout    var item1 = new Pane(...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        title: '选项1'
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    });
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout    var item2 = new Pane(...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        title: '选项2'
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    });
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout    var item3 = new Pane(...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        title: '选项3'
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    });
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    //表格
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout    var grid=  new Ext.grid.PropertyGrid(...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                title: '表格嵌套',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                closable: true,
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout                                source: ...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    "(name)": "grid",
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    "grouping": false,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    "autoFitColumns": true,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    "productionQuality": false,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    "created": new Date(Date.parse('03/18/2008')),
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    "tested": false,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    "version": .01,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                    "borderWidth": 1
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                                }
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                            });
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout    layout = new Border(...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        layout: 'border',
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout        items: [...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            region: 'west',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            title: 'west',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            //此布局采用折叠样式
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            layout: 'accordion',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            collapsible: true,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            width: 100,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            minWidth: 70,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            maxWidth: 150,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            split: true,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            //注入itme1 to 3
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            items: [item1, item2, item3]
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout        }, ...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            region: 'center',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            title: 'center',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            layout:'fit',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            collapsible: true,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            split:true,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            margins:'0 0 0 0',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            //注入表格
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            items:[grid]
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout        }, ...{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            title: 'south',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            //是否同步收缩
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            collapsible: true,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            //收缩方式
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            collapseMode: 'mini',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            region: 'south',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            margins: '0 5 10 5',
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            height: 50,
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            split: true
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        }]
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    });
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    
ExtJS2.0开发与实践笔记[2]——Ext中的Layout});
ExtJS2.0开发与实践笔记[2]——Ext中的Layout

LayoutExt2.html
ExtJS2.0开发与实践笔记[2]——Ext中的Layout<html>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout<head>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <title>LayoutExt2</title>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <!--加载ExtJs资源-->
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <script type="text/javascript" src="adapter/ext/ext-base.js"></script>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <script type="text/javascript" src="ext-all-debug.js"></script>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <!--我的js-->
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <script type="text/javascript" src="LayoutExt2.js"></script>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout       <!--样式-->
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout        <style type="text/css">...
ExtJS2.0开发与实践笔记[2]——Ext中的LayoutExtJS2.0开发与实践笔记[2]——Ext中的Layout            html, body {...}{
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                font: normal 12px verdana;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                margin: 0;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                padding: 0;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                border: 0 none;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                overflow: hidden;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout                height: 100%;
ExtJS2.0开发与实践笔记[2]——Ext中的Layout            }
ExtJS2.0开发与实践笔记[2]——Ext中的Layout        </style>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout</head>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout<body>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <div id="center" class="x-layout-inactive-content"/>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <div id="west" class="x-layout-inactive-content"/>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout    <div id="south" class="x-layout-inactive-content"/>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout</body>
ExtJS2.0开发与实践笔记[2]——Ext中的Layout</html>

效果图如下：
ExtJS2.0开发与实践笔记[2]——Ext中的Layout

以上是我们手动进行的layout设置，其实在大多数时候，我们也可以利用Ext提供给我们的现成布局样式完成操作。

每种布局类都支持其特定的配置选项。关于布局每种配置选项可参考API文档。
<?XML:NAMESPACE PREFIX = O />

 

ExtJS2.0开发与实践笔记[2]——Ext中的Layout

 

ContainerLayout

其它一切布局管理器的基类，容器若不指定某个布局管理器，则默认的管理器就是这个ContainerLayout。ContainerLayout 没有任何的外观表示— 其主要的职责是容纳子项目、控制渲染和一些常见任务，如调节大小缓冲（resize buffering）。 ContainerLayout常用于扩展制定的布局，很少实例化直接使用。详细在API 参考.
 ExtJS2.0开发与实践笔记[2]——Ext中的Layout
CardLayout
CardLayout将容器中的每个组件当作一个卡片来处理。在某一时间，只有一个卡片是可见的，容器象一个卡片堆栈一样工作。大多数的情况，用于向导（Wizards），制定的tab实现或其它多页面信息的场合。参阅API 参考。

 

ExtJS2.0开发与实践笔记[2]——Ext中的Layout
<?XML:NAMESPACE PREFIX = V /><!--[if !vml]--><!--[endif]-->AbsoluteLayout

这是一个非常简单的布局，通过X/Y坐标精确来定位包含各项的相关容器。参阅API 参考.

 

ExtJS2.0开发与实践笔记[2]——Ext中的Layout
<!--[if !vml]--><!--[endif]-->ColumnLayout

适用于多个列并排结构的布局风格，每个列的宽度须由像素值或百分比指定，但高度自适应于内容的高度。详细在API参考.

 

ExtJS2.0开发与实践笔记[2]——Ext中的Layout
<!--[if !vml]--><!--[endif]-->AccordionLayout

AccordionLayout包含了一组像卡片垂直方向堆栈的面板，同通过展开或收缩来显示内容在某一时间，只有一个卡片是可见的。详细在API参考.

 

ExtJS2.0开发与实践笔记[2]——Ext中的Layout
<!--[if !vml]--><!--[endif]-->FitLayout

这是一个简单的布局，主要是创建一个适应容器大小的布局区域。如没有特定的布局要求这是容器最好的默认布局。详细在API参考.

 

ExtJS2.0开发与实践笔记[2]——Ext中的Layout
AnchorLayout

这是为一些固定元素相对于容器四条边的布局。元素可通过与边缘的百分比或便宜一个值来定位， and it also supports a virtual layout canvas that can have different dimensions than the physical container. 详细在API文档。

 

ExtJS2.0开发与实践笔记[2]——Ext中的Layout
<!--[if !vml]--><!--[endif]-->FormLayout

FormLayout是为创建一张要提交数据条目的表单而设计的布局风格。注意，一般来讲，和FormPanel相似，该布局类都有表单提交的自动处理，你会更倾向使用前者。 FormPanels必须指定layout:'form'（只能一定是这样）,所以表单额外需要的一个布局将其嵌套。 参阅API文档。

 

ExtJS2.0开发与实践笔记[2]——Ext中的Layout
<!--[if !vml]--><!--[endif]-->BorderLayout

与1.x的BorderLayout的布局完全一致。布局区域支持嵌套， 滑动条面板和可关闭、微调的分隔区域。对于一些典型的业务程序的首要UI尤为适用。详细API文档。

 

ExtJS2.0开发与实践笔记[2]——Ext中的Layout
TableLayout

主要目的是通过一个表格的形式划分区域。实际上也是生成一个table的HTML makeup 详细在API参考。