我们都知道java中有布局管理器的概念,通过调整布局器可以简化我们对可视组件的管理。而在Ext中同样提供了自己的布局实现,以简化web界面的开发与定制。
如下图所示,Ext的Layout可分解为东、西、南、北、中5个基本区域。
在ExtJS2.0实现中,我们可以写成如下代码样式。ExtJS2.0配置方法如下:初识ExtJS
LayoutExt.js
JavaScript代码
* <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>
* @author chenpeng
* @email:ceponline@yahoo.com.cn
* @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)
显示效果如下图:
我们可以看到,Ext2.0的布局实际上是利用json进行元素标识后在dom元素上嵌套实现的,所以我们也可以很简单的将其他组件插入到layout中去。
LayoutExt2.js
JavaScript代码
*
* <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>
* @author chenpeng
* @email:ceponline@yahoo.com.cn
* @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
XML/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 参考 。
<!--[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参考 。
XML/HTML代码
< 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 >
发表于 @ 2009年07月07日 14:37:00 | 评论( 0 ) | 编辑| 举报| 收藏
旧一篇: 十个糟糕的程序员的行为 | 新一篇:单击Button弹出和双击Grid弹出,获取动画焦点的方式不同姓 名:
校验码:重新获得验证码
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/kinglino520/archive/2009/07/07/4328116.aspx