Java究竟怎么玩？

天地程序已定棋，人间大数待变局
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
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>
 * @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>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>

显示效果如下图：


我们可以看到，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>
 * @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>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文档。

 Image:Layout-container.gif

 

ContainerLayout

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

 Image:Layout-card.gif
CardLayout

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

 Image:Layout-absolute.gif

AbsoluteLayout

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

 Image:Layout-column.gif

ColumnLayout

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

 Image:Layout-accordion.gif

AccordionLayout

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

 Image:Layout-fit.gif

FitLayout

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

 Image:Layout-anchor.gif

AnchorLayout

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

 Image:Layout-form.gif

FormLayout

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

 Image:Layout-border.gif

BorderLayout

与1.x的BorderLayout的布局完全一致。布局区域支持嵌套， 滑动条面板和可关闭、微调的分隔区域。对于一些典型的业务程序的首要UI尤为适用。详细API文档。

 Image:Layout-table.gif

TableLayout

主要目的是通过一个表格的形式划分区域。实际上也是生成一个table的HTML makeup 详细在API参考。
posted on 2008-03-18 22:58  cping  阅读(207)  评论(0)  编辑  收藏  举报