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

1^# 大中小发表于 2008-04-29 12:42:39

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

我们都知道java中有布局管理器的概念，通过调整布局器可以简化我们对可视组件的管理。而在Ext中同样提供了自己的布局实现，以简化web界面的开发与定制。

如下图所示，Ext的Layout可分解为东、西、南、北、中5个基本区域。

在ExtJS2.0实现中，我们可以写成如下代码样式。
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文档。

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

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

ContainerLayout

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