Ext的 Layout布局

来源：互联网发布：淘宝专业培训编辑：程序博客网时间：2024/05/15 08:05

我们都知道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 >
     
     < 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 参考。

 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文档。

 FormLayout

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

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

发表于 @ 2009年07月07日　14:37:00 | 评论( 0 ) | 编辑| 举报| 收藏

旧一篇: 十个糟糕的程序员的行为 | 新一篇:单击Button弹出和双击Grid弹出,获取动画焦点的方式不同姓名：
校验码：重新获得验证码

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/kinglino520/archive/2009/07/07/4328116.aspx