我们都知道java中有布局管理器的概念，通过调整布局器可以简化我们对可视组件的管理。而在Ext中同样提供了自己的布局实现，以简化web界面的开发与定制。
如下图所示，Ext的Layout可分解为东、西、南、北、中5个基本区域。
在ExtJS2.0实现中，我们可以写成如下代码样式。ExtJS2.0配置方法如下： 初识ExtJS
LayoutExt.js
/**
* <p>Title: LoonFramework</p> * <p>Description:Ext的Layout用例</p> * <p>Copyright: Copyright (c) 2008</p> * <p>Company: LoonFramework</p> * <p>License: [url]http://www.apache.org/licenses/LICENSE-2.0</p>[/url] * @author chenpeng * @email：[email]ceponline@yahoo.com.cn[/email] * @version 0.1
*/
LayoutExt
=
function
()
{ //设定布局器及面板 //Ext1.1为Ext.BorderLayout var Viewport = Ext.Viewport; //变量设置 var root; var layout; //返回LayoutExt操作结果到onReady
return { init: function(){ root = this; //初始化Ext状态管理器，此类可返回用户在Cookie中的操作状态 Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); layout = new Viewport({ //布局方式，'border' layout: 'border', items: [ //北 { region: 'north', //显示区域 contentEl: 'north', //绑定的content title: 'North', //名称 split: false,//分割线 collapsible: true, //是否允许折起 //在ie下无此项会报错(firefox无事……),默认分别为此布局左、上、右、下的边距,以此防止越界造成的崩溃。 //也可写作 'Object:数值'的形式，如 margins：{top: 0, left: 0, right:0, bottom: 0} margins: '0 0 0 0' 
}, //西 { region: 'west', //显示区域 contentEl: 'west', //绑定的content title: 'West', //名称 split: true,//分割栏 width: 80, //宽 margins: '0 0 0 0' //在ie下无此项会报错 }, //东 { region: 'east', //显示区域 contentEl: 'east', //绑定的content title: 'East', //名称 width: 80, split: true,//分割栏 margins: '0 0 0 0' //在ie下无此项会报错 }, //南 { region: 'south', //显示区域 contentEl: 'south', //绑定的content title: 'South', //名称 split: true,//分割栏 margins: '0 0 0 0' //在ie下无此项会报错 }, //中 new Ext.TabPanel({ region: 'center', deferredRender: false, activeTab: 0, //活动的tab索引 items: [{ contentEl: 'center1', title: '中央区域1', closable: true, //关闭项 autoScroll: true //是否自动显示滚动条 }, { contentEl: 'center2', title: '中央区域2', autoScroll: true }] }) ] }); } };}
();
//
加载onReady
Ext.onReady(LayoutExt.init, LayoutExt,
true
);
LayoutExt.html (定义html页面，设定及引用ext)
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
>
<
title
>
LayoutExt
</
title
>
<!--
加载ExtJs资源
-->
<
link
rel
="stylesheet"
type
="text/css"
href
="resources/css/ext-all.css"
/>
<
script
type
="text/javascript"
src
="adapter/ext/ext-base.js"
>
</
script
>
<
script
type
="text/javascript"
src
="ext-all.js"
>
</
script
>
<!--
我的js
-->
<
script
type
="text/javascript"
src
="LayoutExt.js"
>
</
script
>
<!--
样式
-->
<
style
type
="text/css"
>
html, body { font: normal 12px verdana; margin: 0; padding: 0; border: 0 none; overflow: hidden; height: 100%; }
</
style
>
</
head
>
<
body
>
<
div
id
="north"
class
="x-layout-inactive-content"
>
北方
</
div
>
<
div
id
="west"
class
="x-layout-inactive-content"
>
西方
</
div
>
<
div
id
="east"
class
="x-layout-inactive-content"
>
东方
</
div
>
<
div
id
="south"
class
="x-layout-inactive-content"
>
南方
</
div
>
<
div
id
="center1"
class
="x-layout-inactive-content"
>
中央区域1
</
div
>
<
div
id
="center2"
class
="x-layout-inactive-content"
>
中央区域2
</
div
>
</
body
>
</
html
>
显示效果如下图：
我们可以看到，Ext2.0的布局实际上是利用json进行元素标识后在dom元素上嵌套实现的，所以我们也可以很简单的将其他组件插入到layout中去。
LayoutExt2.js
/** * * <p>Title: LoonFramework</p> * <p>Description:Ext的内部Layout嵌套用例</p> * <p>Copyright: Copyright (c) 2008</p> * <p>Company: LoonFramework</p> * <p>License: [url]http://www.apache.org/licenses/LICENSE-2.0</p>[/url] * @author chenpeng * @email：[email]ceponline@yahoo.com.cn[/email] * @version 0.1 */
Ext.onReady(
function
()
{ //设定布局器及面板 var layout; var Pane=Ext.Panel; var Border=Ext.Viewport; //初始化Ext状态管理器，此类可返回用户在Cookie中的操作状态 Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); //生成内部布局 var item1 = new Pane({ title: '选项1' }); var item2 = new Pane({ title: '选项2' }); var item3 = new Pane({ title: '选项3' }); //表格 var grid= new Ext.grid.PropertyGrid({ title: '表格嵌套', closable: true, source: { "(name)": "grid", "grouping": false, "autoFitColumns": true, "productionQuality": false, "created": new Date(Date.parse('03/18/2008')), "tested": false, "version": .01, "borderWidth": 1 } }); layout = new Border({ layout: 'border', items: [{ region: 'west', title: 'west', //此布局采用折叠样式 layout: 'accordion', collapsible: true, width: 100, minWidth: 70, maxWidth: 150, split: true, //注入itme1 to 3 items: [item1, item2, item3] }, { region: 'center', title: 'center', layout:'fit', collapsible: true, split:true, margins:'0 0 0 0', //注入表格 items:[grid] }, { title: 'south', //是否同步收缩 collapsible: true, //收缩方式 collapseMode: 'mini', region: 'south', margins: '0 5 10 5', height: 50, split: true }] }); }
);
LayoutExt2.html
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=UTF-8"
>
<
title
>LayoutExt2
</
title
>
<!--
加载ExtJs资源
-->
<
link
rel
="stylesheet"
type
="text/css"
href
="resources/css/ext-all.css"
/>
<
script
type
="text/javascript"
src
="adapter/ext/ext-base.js"
></
script
>
<
script
type
="text/javascript"
src
="ext-all-debug.js"
></
script
>
<!--
我的js
-->
<
script
type
="text/javascript"
src
="LayoutExt2.js"
></
script
>
<!--
样式
-->
<
style
type
="text/css"
>
html, body { font: normal 12px verdana; margin: 0; padding: 0; border: 0 none; overflow: hidden; height: 100%; }
</
style
>
</
head
>
<
body
>
<
div
id
="center"
class
="x-layout-inactive-content"
/>
<
div
id
="west"
class
="x-layout-inactive-content"
/>
<
div
id
="south"
class
="x-layout-inactive-content"
/>
</
body
>
</
html
>
效果图如下：
以上是我们手动进行的layout设置，其实在大多数时候，我们也可以利用Ext提供给我们的现成布局样式完成操作。
每种布局类都支持其特定的配置选项。关于布局每种配置选项可参考API文档。
|
ContainerLayout
其它一切布局管理器的基类，容器若不指定某个布局管理器，则默认的管理器就是这个ContainerLayout。ContainerLayout 没有任何的外观表示— 其主要的职责是容纳子项目、控制渲染和一些常见任务，如调节大小缓冲（resize buffering）。 ContainerLayout常用于扩展制定的布局，很少实例化直接使用。详细在API 参考.
|
 |
CardLayout
CardLayout将容器中的每个组件当作一个卡片来处理。在某一时间，只有一个卡片是可见的，容器象一个卡片堆栈一样工作。大多数的情况，用于向导（Wizards），制定的tab实现或其它多页面信息的场合。参阅
API 参考。
|
|
这是一个非常简单的布局，通过X/Y坐标精确来定位包含各项的相关容器。参阅API 参考.
|
|
适用于多个列并排结构的布局风格，每个列的宽度须由像素值或百分比指定，但高度自适应于内容的高度。详细在API参考.
|
|
AccordionLayout包含了一组像卡片垂直方向堆栈的面板，同通过展开或收缩来显示内容在某一时间，只有一个卡片是可见的。详细在API参考.
|
|
这是一个简单的布局，主要是创建一个适应容器大小的布局区域。如没有特定的布局要求这是容器最好的默认布局。详细在API参考.
|
|
这是为一些固定元素相对于容器四条边的布局。元素可通过与边缘的百分比或便宜一个值来定位， and it also supports a virtual layout canvas that can have different dimensions than the physical container. 详细在API文档。
|
|
|
|
与1.x的BorderLayout的布局完全一致。布局区域支持嵌套， 滑动条面板和可关闭、微调的分隔区域。对于一些典型的业务程序的首要UI尤为适用。详细API文档。
|
|
本文转自 cping 51CTO博客，原文链接:http://blog.51cto.com/cping1982/129951
