论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2008-03-26 13:58 |只看该作者 |倒序浏览

我们都知道java中有布局管理器的概念，通过调整布局器可以简化我们对可视组件的管理。而在Ext中同样提供了自己的布局实现，以简化web界面的开发与定制。
如下图所示，Ext的Layout可分解为东、西、南、北、中5个基本区域。

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

/**//**

* Title: LoonFramework

* Description:Ext的Layout用例

* Copyright: Copyright (c) 2008

* Company: LoonFramework

* License: http://www.apache.org/licenses/LICENSE-2.0

* @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)

html>

head>

      meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

      title>LayoutExttitle>

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

/**//**

*

* Title: LoonFramework

* Description:Ext的内部Layout嵌套用例

* Copyright: Copyright (c) 2008

* Company: LoonFramework

* License: http://www.apache.org/licenses/LICENSE-2.0

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

html>

head>

meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

title>LayoutExt2title>

加载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 参考
。




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



[/url]
ColumnLayout
         适用于多个列并排结构的布局风格，每个列的宽度须由像素值或百分比指定，但高度自适应于内容的高度。详细在
[url=http://extjs.com/deploy/dev/docs/?class=Ext.layout.ColumnLayout]API参考
.



[/url]
AccordionLayout
         AccordionLayout包含了一组像卡片垂直方向堆栈的面板，同通过展开或收缩来显示内容在某一时间，只有一个卡片是可见的。详细在
[url=http://extjs.com/deploy/dev/docs/?class=Ext.layout.Accordion]API参考
.



[/url]
FitLayout
         这是一个简单的布局，主要是创建一个适应容器大小的布局区域。如没有特定的布局要求这是容器最好的默认布局。详细在
[url=http://extjs.com/deploy/dev/docs/?class=Ext.layout.FitLayout]API参考
.



[/url]
AnchorLayout
         这是为一些固定元素相对于容器四条边的布局。元素可通过与边缘的百分比或便宜一个值来定位， and it also supports a virtual layout canvas that can have different dimensions than the physical container. 详细在
[url=http://extjs.com/deploy/dev/docs/?class=Ext.layout.AnchorLayout]API文档
。



[/url]
FormLayout
         FormLayout是为创建一张要提交数据条目的表单而设计的布局风格。注意，一般来讲，和
[url=http://extjs.com/deploy/dev/docs/?class=Ext.form.FormPanel]FormPanel
相似，该布局类都有表单提交的自动处理，你会更倾向使用前者。 FormPanels必须指定layout:'form'（只能一定是这样）,所以表单额外需要的一个布局将其嵌套。参阅
API文档
。



[/url]
BorderLayout
         与1.x的BorderLayout的布局完全一致。布局区域支持嵌套，滑动条面板和可关闭、微调的分隔区域。对于一些典型的业务程序的首要UI尤为适用。详细
[url=http://extjs.com/deploy/dev/docs/?class=Ext.layout.BorderLayout]API文档
。



[/url]
TableLayout
                                 主要目的是通过一个表格的形式划分区域。实际上也是生成一个table的HTML makeup 详细在
[url=http://extjs.com/deploy/dev/docs/?class=Ext.layout.TableLayout]API参考
。


本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/26845/showart_508759.html

文库|博客

返回列表

Chinaunix › 论坛 › 程序设计 › Java › Java文档中心 › ExtJS2.0开发与实践笔记[2]——Ext中的Layout

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

浏览过的版块