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

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

                我们都知道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：[email protected]
 * @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：[email protected]
 * @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