ExtJS2.0开发与实践笔记[2]——Ext中的Layout

mmdev

浏览: 13427515 次
性别:
来自: 大连

最近访客更多访客>>

jklwan

u012363178

anttu

devcang

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (15973)

社区版块

存档分类

2013-03 ( 14)
2013-02 ( 88)
2013-01 ( 196)
更多存档...

我们都知道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: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>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<title>LayoutExt</title>

<linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/>

<scripttype="text/javascript"src="adapter/ext/ext-base.js">

</script>

<scripttype="text/javascript"src="ext-all.js">

</script>

<scripttype="text/javascript"src="LayoutExt.js">

</script>

<styletype="text/css">

html,body{

font:normal12pxverdana;

margin:0;

padding:0;

border:0none;

overflow:hidden;

height:100%;

}

</style>

</head>

<body>

<divid="north"class="x-layout-inactive-content">

北方

</div>

<divid="west"class="x-layout-inactive-content">

西方

</div>

<divid="east"class="x-layout-inactive-content">

东方

</div>

<divid="south"class="x-layout-inactive-content">

南方

</div>

<divid="center1"class="x-layout-inactive-content">

中央区域1

</div>

<divid="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: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>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<title>LayoutExt2</title>

<linkrel="stylesheet"type="text/css"href="resources/css/ext-all.css"/>

<scripttype="text/javascript"src="adapter/ext/ext-base.js"></script>

<scripttype="text/javascript"src="ext-all-debug.js"></script>

<scripttype="text/javascript"src="LayoutExt2.js"></script>

<styletype="text/css">

html,body{

font:normal12pxverdana;

margin:0;

padding:0;

border:0none;

overflow:hidden;

height:100%;

}

</style>

</head>

<body>

<divid="center"class="x-layout-inactive-content"/>

<divid="west"class="x-layout-inactive-content"/>

<divid="south"class="x-layout-inactive-content"/>

</body>

</html>

效果图如下：

以上是我们手动进行的layout设置，其实在大多数时候，我们也可以利用Ext提供给我们的现成布局样式完成操作。

每种布局类都支持其特定的配置选项。关于布局每种配置选项可参考API文档。

ContainerLayout

其它一切布局管理器的基类，容器若不指定某个布局管理器，则默认的管理器就是这个ContainerLayout。ContainerLayout 没有任何的外观表示— 其主要的职责是容纳子项目、控制渲染和一些常见任务，如调节大小缓冲（resize buffering）。 ContainerLayout常用于扩展制定的布局，很少实例化直接使用。详细在API 参考.

CardLayout

CardLayout将容器中的每个组件当作一个卡片来处理。在某一时间，只有一个卡片是可见的，容器象一个卡片堆栈一样工作。大多数的情况，用于向导（Wizards），制定的tab实现或其它多页面信息的场合。参阅API 参考。

AbsoluteLayout

这是一个非常简单的布局，通过X/Y坐标精确来定位包含各项的相关容器。参阅API 参考.

ColumnLayout

适用于多个列并排结构的布局风格，每个列的宽度须由像素值或百分比指定，但高度自适应于内容的高度。详细在API参考.

AccordionLayout

AccordionLayout包含了一组像卡片垂直方向堆栈的面板，同通过展开或收缩来显示内容在某一时间，只有一个卡片是可见的。详细在API参考.

FitLayout

这是一个简单的布局，主要是创建一个适应容器大小的布局区域。如没有特定的布局要求这是容器最好的默认布局。详细在API参考.

AnchorLayout

这是为一些固定元素相对于容器四条边的布局。元素可通过与边缘的百分比或便宜一个值来定位， and it also supports a virtual layout canvas that can have different dimensions than the physical container. 详细在API文档。