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>Copyright:Copyright(c)2008</p>
*<p>Company:LoonFramework</p>
*<p>License:http://www.apache.org/licenses/LICENSE-2.0</p>
*@authorchenpeng
*@email：ceponline@yahoo.com.cn
*@version0.1
*/
LayoutExt = function () ... {
//设定布局器及面板
//Ext1.1为Ext.BorderLayout
varViewport=Ext.Viewport;
//变量设置
varroot;
varlayout;
//返回LayoutExt操作结果到onReady
return...{
init:function()...{
root=this;
//初始化Ext状态管理器，此类可返回用户在Cookie中的操作状态
Ext.state.Manager.setProvider(newExt.state.CookieProvider());

layout=newViewport(...{
//布局方式，'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:'0000'
},//西
...{
region:'west',//显示区域
contentEl:'west',//绑定的content
title:'West',//名称
split:true,//分割栏
width:80,//宽
margins:'0000'//在ie下无此项会报错
},//东
...{
region:'east',//显示区域
contentEl:'east',//绑定的content
title:'East',//名称
width:80,
split:true,//分割栏
margins:'0000'//在ie下无此项会报错
},//南
...{
region:'south',//显示区域
contentEl:'south',//绑定的content
title:'South',//名称
split:true,//分割栏
margins:'0000'//在ie下无此项会报错
},//中
newExt.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:normal12pxverdana;
margin:0;
padding:0;
border:0none;
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:http://www.apache.org/licenses/LICENSE-2.0</p>
*@authorchenpeng
*@email：ceponline@yahoo.com.cn
*@version0.1
*/
Ext.onReady( function () ... {
//设定布局器及面板

varlayout;
varPane=Ext.Panel;
varBorder=Ext.Viewport;
//初始化Ext状态管理器，此类可返回用户在Cookie中的操作状态
Ext.state.Manager.setProvider(newExt.state.CookieProvider());
//生成内部布局
varitem1=newPane(...{
title:'选项1'
});

varitem2=newPane(...{
title:'选项2'
});

varitem3=newPane(...{
title:'选项3'
});
//表格
vargrid=newExt.grid.PropertyGrid(...{
title:'表格嵌套',
closable:true,
source:...{
"(name)":"grid",
"grouping":false,
"autoFitColumns":true,
"productionQuality":false,
"created":newDate(Date.parse('03/18/2008')),
"tested":false,
"version":.01,
"borderWidth":1
}
});
layout=newBorder(...{
layout:'border',
items:[...{
region:'west',
title:'west',
//此布局采用折叠样式
layout:'accordion',
collapsible:true,
width:100,
minWidth:70,
maxWidth:150,
split:true,
//注入itme1to3
items:[item1,item2,item3]
},...{
region:'center',
title:'center',
layout:'fit',
collapsible:true,
split:true,
margins:'0000',
//注入表格
items:[grid]
},...{
title:'south',
//是否同步收缩
collapsible:true,
//收缩方式
collapseMode:'mini',
region:'south',
margins:'05105',
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:normal12pxverdana;
margin:0;
padding:0;
border:0none;
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 gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter" /> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0" /> <v:f eqn="sum @0 1 0" /> <v:f eqn="sum 0 0 @1" /> <v:f eqn="prod @2 1 2" /> <v:f eqn="prod @3 21600 pixelWidth" /> <v:f eqn="prod @3 21600 pixelHeight" /> <v:f eqn="sum @0 0 1" /> <v:f eqn="prod @6 1 2" /> <v:f eqn="prod @7 21600 pixelWidth" /> <v:f eqn="sum @8 21600 0" /> <v:f eqn="prod @7 21600 pixelHeight" /> <v:f eqn="sum @10 21600 0" /> </v:formulas> <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect" /> <o:lock v:ext="edit" aspectratio="t" /> </v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" alt="" href="http://extjs.com/learn/w/index.php?title=Ext_2_Overview_%28Chinese%29&amp;action=edit&amp;section=22" title="&quot;Edit section: AbsoluteLayout&quot;" style='width:24pt;height:24pt' o:button="t" /><![endif]--><!--[if !vml]--><!--[endif]-->AbsoluteLayout 这是一个非常简单的布局，通过X/Y坐标精确来定位包含各项的相关容器。参阅API 参考.		<!--[if gte vml 1]><v:shape id="_x0000_i1026" type="#_x0000_t75" alt="" href="http://extjs.com/learn/w/index.php?title=Ext_2_Overview_%28Chinese%29&amp;action=edit&amp;section=23" title="&quot;Edit section: ColumnLayout&quot;" style='width:24pt;height:24pt' o:button="t" /><![endif]--><!--[if !vml]--><!--[endif]-->ColumnLayout 适用于多个列并排结构的布局风格，每个列的宽度须由像素值或百分比指定，但高度自适应于内容的高度。详细在API参考.
	<!--[if gte vml 1]><v:shape id="_x0000_i1027" type="#_x0000_t75" alt="" href="http://extjs.com/learn/w/index.php?title=Ext_2_Overview_%28Chinese%29&amp;action=edit&amp;section=24" title="&quot;Edit section: AccordionLayout&quot;" style='width:24pt; height:24pt' o:button="t" /><![endif]--><!--[if !vml]--><!--[endif]-->AccordionLayout AccordionLayout包含了一组像卡片垂直方向堆栈的面板，同通过展开或收缩来显示内容在某一时间，只有一个卡片是可见的。详细在API参考.		<!--[if gte vml 1]><v:shape id="_x0000_i1028" type="#_x0000_t75" alt="" href="http://extjs.com/learn/w/index.php?title=Ext_2_Overview_%28Chinese%29&amp;action=edit&amp;section=25" title="&quot;Edit section: FitLayout&quot;" style='width:24pt;height:24pt' o:button="t" /><![endif]--><!--[if !vml]--><!--[endif]-->FitLayout 这是一个简单的布局，主要是创建一个适应容器大小的布局区域。如没有特定的布局要求这是容器最好的默认布局。详细在API参考.
	<!--[if gte vml 1]><v:shape id="_x0000_i1029" type="#_x0000_t75" alt="" href="http://extjs.com/learn/w/index.php?title=Ext_2_Overview_%28Chinese%29&amp;action=edit&amp;section=26" title="&quot;Edit section: AnchorLayout&quot;" style='width:24pt;height:24pt' o:button="t" /><![endif]-->AnchorLayout 这是为一些固定元素相对于容器四条边的布局。元素可通过与边缘的百分比或便宜一个值来定位， and it also supports a virtual layout canvas that can have different dimensions than the physical container. 详细在API文档。		<!--[if gte vml 1]><v:shape id="_x0000_i1030" type="#_x0000_t75" alt="" href="http://extjs.com/learn/w/index.php?title=Ext_2_Overview_%28Chinese%29&amp;action=edit&amp;section=27" title="&quot;Edit section: FormLayout&quot;" style='width:24pt;height:24pt' o:button="t" /><![endif]--><!--[if !vml]--><!--[endif]-->FormLayout FormLayout是为创建一张要提交数据条目的表单而设计的布局风格。注意，一般来讲，和FormPanel相似，该布局类都有表单提交的自动处理，你会更倾向使用前者。 FormPanels必须指定layout:'form'（只能一定是这样）,所以表单额外需要的一个布局将其嵌套。 参阅API文档。
	<!--[if gte vml 1]><v:shape id="_x0000_i1031" type="#_x0000_t75" alt="" href="http://extjs.com/learn/w/index.php?title=Ext_2_Overview_%28Chinese%29&amp;action=edit&amp;section=28" title="&quot;Edit section: BorderLayout&quot;" style='width:24pt;height:24pt' o:button="t" /><![endif]--><!--[if !vml]--><!--[endif]-->BorderLayout 与1.x的BorderLayout的布局完全一致。布局区域支持嵌套， 滑动条面板和可关闭、微调的分隔区域。对于一些典型的业务程序的首要UI尤为适用。详细API文档。		<!--[if gte vml 1]><v:shape id="_x0000_i1032" type="#_x0000_t75" alt="" href="http://extjs.com/learn/w/index.php?title=Ext_2_Overview_%28Chinese%29&amp;action=edit&amp;section=29" title="&quot;Edit section: TableLayout&quot;" style='width:24pt;height:24pt' o:button="t" /><![endif]-->TableLayout 主要目的是通过一个表格的形式划分区域。实际上也是生成一个table的HTML makeup 详细在API参考。