布局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, {
- north: {
- split:false,
- initialSize: 35
- },
- south: {
- split:false,
- initialSize: 20
- },
- west: {
- split:false,
- initialSize: 200,
- collapsible: false
- },
- center: {
- autoScroll: true
- }
- });
第二步：
为layout填充内容，分别为north、south、west和center填充了相应的内容面板ContentPanel，layout.beginUpdate()和layout.endUpdate()表示在其间的添加过程中先不要对加入的对象排版布局。这样的好处是避免了ContentPanel有对象加入时，导致UI的刷新，改进了整体的用户体验。如下所示：
js 代码
- layout.beginUpdate();
- layout.add('north', new Ext.ContentPanel('header', {fitToFrame:true}));
- layout.add('south', new Ext.ContentPanel('footer', {fitToFrame:true}));
- layout.add('west', new Ext.ContentPanel('nav', {fitToFrame:true}));
- layout.add('center', new Ext.ContentPanel('content'));
- layout.endUpdate();
第三步：
页面区域内容，在html页面中可以通过div进行区域内容设置，如下
html代码
- <div id="header" class="x-layout-inactive-content">
- ......
- </div>
- <div id="nav" class="x-layout-inactive-content">
- ......
- </div>
- <div id="content" class="x-layout-inactive-content">
- ......
- </div>
- <div id="footer" class="x-layout-inactive-content">
- ......
- </div>
效果图如下：
使用示例二：嵌套的布局
嵌套的布局可以通过在BorderLayout里面添加BorderLayout来实现，这中间需要NestedLayoutPanel来对里面的BorderLayout包装，代码示例如下：
js 代码
- var layout = new Ext.BorderLayout(document.body, {
- west: {
- split:true,
- initialSize: 200,
- titlebar: true,
- collapsible: true,
- minSize: 100,
- maxSize: 400
- },
- center: {
- autoScroll: false
- }
- });
- layout.beginUpdate();
-
- layout.add('west', new Ext.ContentPanel('nav', {title: 'Navigation', fitToFrame:true, closable:false}));
- var innerLayout = new Ext.BorderLayout('content', {
- south: {
- split:true,
- initialSize: 200,
- minSize: 100,
- maxSize: 400,
- autoScroll:true,
- collapsible:true,
- titlebar: true
- },
- center: {
- autoScroll:true
- }
- });
- innerLayout.add('south', new Ext.ContentPanel('inner1', "More Information"));
- innerLayout.add('center', new Ext.ContentPanel('inner2'));
- layout.add('center', new Ext.NestedLayoutPanel(innerLayout));
- layout.endUpdate();
Layout布局属性说明（自己的理解翻译可能不准确）：
split:true, 边框是否可以拖动
initialSize: 200, 初始大小
titlebar: true, 是否带有标头栏
collapsible: true, 是否可以卷缩
minSize: 100, 最小大小
maxSize: 400 最大大小
页面效果如：
分享到：
相关推荐
EXT 布局 Layout 资料EXT 布局 Layout 资料EXT 布局 Layout 资料EXT 布局 Layout 资料
ext2.0 layout布局(使用viewport),将其部署到php服务器上，可以查看效果：适合一般的应该工作界面，有滑动菜单和树形菜单等，初步实现了一个不错的应用视图框架
发现目前网上 ext layout 例子虽然各项功能可以实现但是无法应用到真实项目中 因为大部分例子其中的各组件是静态写成的 只是动态的通过对象名调用 实际开发中各组件多为动态生成 因为即时数据：不能定义对象名...
发现目前网上 ext layout 例子虽然各项功能可以实现但是无法应用到真实项目中 因为大部分例子其中的各组件是静态写成的 只是动态的通过对象名调用 实际开发中各组件多为动态生成 因为即时数据：不能定义对象名...
ext布局(Layout.html)例子.pdf
ext布局(Layout.html)例子[参考].pdf
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
EXT制作的布局，使用border layout, 稍做改动即可添加到自己的项目里， 简单实用。让你感受EXT的强大
首先，此文档是英文的；第二，此文件主要的内容为ext4文件系统在磁盘上的布局构成；
本文是 GWT-Ext 体验之旅系列 的第 3 部分，我们将体验各种布局管理器的效果，了解我们常用的布局管理器的编程方式和一些经验总结。在对树的介绍中，我们将从树的同步和异步方式的初始化到树的 一些特性进行详细介绍...
折叠布局Ext.layout.AnchorLayout 边框布局Ext.layout.BorderLayout 卡片式布局Ext.layout.CardLayout 列布局Ext.layout.ColumnLayout 填充布局xt.layout.FitLayout 表单布局Ext.layout.FormLayout 表格布局Ext....
即：Ext.window 4.mainPage.html为tab布局，右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-...
ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档，详细讲诉了各种布局，并附源码与界面展示，希望能给你带来帮助
即：Ext.window 4.mainPage.html为tab布局，右面为tree中间为tab页面。 5.tz-normal-test.html为普通拖拽的练习。 6.tree-asynch-test.html为异步加载的树 7.tree-edit-test.html为节点可以编辑的树 8.tree-tz-test....
本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍： Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域，并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局...
9.4.4 盒子布局、垂直布局与水平布局：ext.layout.container.box、ext.layout.container.vbox与ext.layout.container.hbox / 442 9.4.5 为盒子模型提供调整大小的功能：ext.resizer.splitter / 445 9.4.6 手风琴...
EXT-tree.rar Ext grid与树实例.rar ext2.1+struts2+spring2.5+hibernate3.2.rar ext布局layout各组件动态生成并相互交互.rar EXT登陆系统.rar
刚接触ext 自己做的一些布局方面的例子与大家分享 虽然很简单 希望对大家有帮助
EXT的布局（Layout） 37 简单的例子 38 加入内容 42 开始使用Grid 51 步骤一 定义数据(Data Definition) 51 步骤二 列模型（Column Model） 52 Grid组件的简易分页 53 Grid数据 53 怎么做一个分页的Grid 54 分页栏...
适合企业级开发，能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。 真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid，有完整地说明文档。