ExtJS2.0开发与实践笔记[2]——Ext中的Layout-阿里云开发者社区

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

如下图所示，Ext的Layout可分解为东、西、南、北、中5个基本区域。

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

LayoutExt.js

/**

* <p>Title: LoonFramework</p>

* <p>Description:Ext的Layout用例</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'

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 >

< 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 >

< 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>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({

items: [{

region: 'west',

title: 'west',

//此布局采用折叠样式

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 >

< 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 >

< 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 参考。
	<!--[if !vml]--><!--[endif]-->AbsoluteLayout 这是一个非常简单的布局，通过X/Y坐标精确来定位包含各项的相关容器。参阅API 参考.		<!--[if !vml]--><!--[endif]-->ColumnLayout 适用于多个列并排结构的布局风格，每个列的宽度须由像素值或百分比指定，但高度自适应于内容的高度。详细在API参考.
	<!--[if !vml]--><!--[endif]-->AccordionLayout AccordionLayout包含了一组像卡片垂直方向堆栈的面板，同通过展开或收缩来显示内容在某一时间，只有一个卡片是可见的。详细在API参考.		<!--[if !vml]--><!--[endif]-->FitLayout 这是一个简单的布局，主要是创建一个适应容器大小的布局区域。如没有特定的布局要求这是容器最好的默认布局。详细在API参考.
	AnchorLayout 这是为一些固定元素相对于容器四条边的布局。元素可通过与边缘的百分比或便宜一个值来定位， and it also supports a virtual layout canvas that can have different dimensions than the physical container. 详细在API文档。		<!--[if !vml]--><!--[endif]-->FormLayout FormLayout是为创建一张要提交数据条目的表单而设计的布局风格。注意，一般来讲，和FormPanel相似，该布局类都有表单提交的自动处理，你会更倾向使用前者。 FormPanels必须指定layout:'form'（只能一定是这样）,所以表单额外需要的一个布局将其嵌套。参阅API文档。
	<!--[if !vml]--><!--[endif]-->BorderLayout 与1.x的BorderLayout的布局完全一致。布局区域支持嵌套，滑动条面板和可关闭、微调的分隔区域。对于一些典型的业务程序的首要UI尤为适用。详细API文档。		TableLayout 主要目的是通过一个表格的形式划分区域。实际上也是生成一个table的HTML makeup 详细在API参考。