Extjs-布局

1.在Ext中布局都是从Ext.Container开始的

Ext.Container的父类是Ext.BoxComponentExt.BoxComponent是一个盒子组件  

2.Ext.layout.FitLayout

FitLayout只适合使用一个组件,自动适应页面大小,在items中不要使用autoHeight参数,否则FitLayout会失效

3. Ext.layout.BorderLayout

如果要实现东西南北中5部分就要使用BorderLayout,region = center 绝对不可以省略  

3.1.设置子区域的大小

使用width和height参数可以设置区域大小,North和south值只可以设置高度,East和west值只可以设置宽度,在BorderLayout中不要使用autoHeight 

3.2.使用split并限制它的范围

Split 允许用户拖动改变大小,设置拖动最大和最少minSize和maxSize 这两个都要与split相结合  

3.3. 子区域的展开和折叠

//True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条  
collapsible : true,  

4.Ext.layout.Accordion伸缩菜单的布局

4.1.效果图

 

4.2.代码

    <%@ page language="java"  pageEncoding="UTF-8"%>  
    <%   String rootpath = request.getContextPath();%>  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <html>  
      <head>  
        <link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>  
        <script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>  
        <script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>  
        <script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>  
        <script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>  
        <script type="text/javascript" src="<%=rootpath%>/ext/PagingMemoryProxy.js"></script>  
        <script type="text/javascript" defer>  
            Ext.onReady(function(){  
                var tabs = new Ext.TabPanel({  
                    region : 'center',  
                    margins : '3 3 3 0',//距离top、right、bottom、left边界的距离,单位为像素  
                    activeTab : 0,  
                    defaults : {  
                        autoScroll : true  
                    },  
                    items : [{  
                        title : '默认',  
                        html : '内容'  
                    }]  
                });  
                  
                var panel = new Ext.Panel({  
                    title : '导航',  
                    region : 'west',  
                    split : true,  
                    width : 200,  
                    //True表示为面板是可收缩的，并自动渲染一个展开/收缩的轮换按钮在头部工具条  
                    collapsible : true,  
                    margins : '3 0 3 3',  
                    cmargins : '3 3 3 3',  
                    layout : 'accordion',  
                    layoutConfig : {  
                        titleCollapse : true,//单击标题就可以折叠面板  
                        animate : true,//展开的效果  
                        activeOnTop : true//是否可以改变顺序  
                    },  
                    items : [{  
                        title : '第一栏'  
                    },{  
                        title : '第二栏'  
                    },{  
                        title : '第三栏'  
                    }]  
                });  
                  
                new Ext.Viewport({  
                    layout : 'border',  
                    items : [panel,tabs]  
                });  
            });  
        </script>  
      </head>  
      <body>  
      </body>  
    </html>  

5.Ext.layout.CardLayout操作向导的布局

CardLayout可以看作是一叠卡片,这种布局最适合操作向导

5.1.效果图

5.2.代码

    <%@ page language="java"  pageEncoding="UTF-8"%>  
    <%   String rootpath = request.getContextPath();%>  
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    <html>  
      <head>  
        <link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>  
        <script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>  
        <script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>  
        <script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>  
        <script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>  
        <script type="text/javascript" src="<%=rootpath%>/ext/PagingMemoryProxy.js"></script>  
        <script type="text/javascript" defer>  
            Ext.onReady(function(){  
                var navHandler = function(direction){  
                    var wizard = Ext.getCmp('wizard').layout;  
                    var prev = Ext.getCmp('move-prev');  
                    var next = Ext.getCmp('move-next');  
                      
                    //对页面元素生成唯一id  
                    var activeId = wizard.activeItem.id;  
                    if (activeId == 'card-0') {  
                        if (direction == 1) {  
                            //设置布局中某项为活动项  
                            wizard.setActiveItem(1);  
                            prev.setDisabled(false);  
                        }  
                    } else if (activeId == 'card-1') {  
                        if (direction == -1) {  
                            //设置布局中某项为活动项  
                            wizard.setActiveItem(0);  
                             //组件禁用  
                            prev.setDisabled(true);  
                        } else {  
                            //设置布局中某项为活动项  
                            wizard.setActiveItem(2);  
                             //组件禁用  
                            next.setDisabled(true);  
                        }  
                    } else if (activeId == 'card-2') {  
                        if (direction == -1) {  
                            //设置布局中某项为活动项  
                            wizard.setActiveItem(1);  
                            //组件不禁用  
                            next.setDisabled(false);  
                        }  
                    }  
                };  
                new Ext.Viewport({  
                    layout : 'border',  
                    items : [{  
                        id : 'wizard',  
                        title : '向导',  
                        region : 'west',  
                        split : true,//可拖放  
                        width : 200,  
                        layout : 'card',  
                        bodyStyle : 'padding:15px',  
                        activeItem : 0,  
                        defaults : {  
                            border : false  
                        },  
                        bbar : [{  
                            id : 'move-prev',  
                            text : '上一步',  
                            //这个方法的作用是返回一个匿名方法的引用,通常用来改变作用域  
                            handler : navHandler.createDelegate(this,[-1]),  
                            disabled : true  
                        },'->',{  
                            id : 'move-next',  
                            //这个方法的作用是返回一个匿名方法的引用,通常用来改变作用域  
                            handler : navHandler.createDelegate(this,[1]),  
                            text : '下一步'  
                        }],  
                        items : [{  
                            id : 'card-0',  
                            html : '哈哈<br/>欢迎向导<br/>第一步,共三步'  
                        },{  
                            id : 'card-1',  
                            html : '第二步,共三步'  
                        },{  
                            id : 'card-2',  
                            html : '恭喜,完成了<br/>第三步,共三步'  
                        }]  
                    },{  
                        region : 'center',  
                        split : true,  
                        border : true  
                    }]  
                });  
            });  
        </script>  
      </head>  
      <body>  
      </body>  
    </html>  

6.Ext.lyout.AnchorLayout和Ext.lyout.AbsoluteLayout控制位置和大小的布局

AnchorLayout既可以为items中的每个组件指定与总体布局大小的差值,也可以设置一个比例使子组件可以根据整体自行计算本身的大小  

提供3中配置方式

第一种使用百分比进行配置

    new Ext.Viewport({  
        layout : 'anchor',  
        items : [{  
            title : '面板1',  
            anchor : '50%,50%'//宽度50% 高度50%  
        },{  
            title : '面板2',  
            anchor : '80%'//宽度80% 高度auto  
        }]  
    });  

第二种直接设置与右侧和底部的边距

    new Ext.Viewport({  
        layout : 'anchor',  
        items : [{  
            title : '面板1',  
            anchor : '-50,-200'//右侧-50 底部-200  
        },{  
            title : '面板2',  
            anchor : '-100'//右侧-100 底部-auto  
        }]  
    });  

第三种称为side,使用它之前为布局整体的父组件和布局内部的子组件设置好width,height和anchorSize属性

    new Ext.Viewport({  
        layout : 'anchor',//计算差值  
        anchorSize : {  
            width : 400,  
            height : 300  
        },  
        items : [{  
            title : '面板1',  
            width : 200,  
            height : 100,  
            anchor : 'r b'//固定写法,也可以写成right buttom  
        },{  
            title : '面板2',  
            width : 100,  
            height : 200,  
            anchor : 'r b'//固定写法,也可以写成right buttom  
        }]  
    });  

AnchorLayout的子组件是自上而下的,AbsoluteLayouts是AnchorLayout的子类,解决只可以自上而下的这个问题,设置x,y参数达到效果

    new Ext.Viewport({  
        layout : 'absolute',  
        items : [{  
            title : '面板1',  
            x : 100,  
            y : 100,  
            anchor : '50% 50%'  
        },{  
            title : '面板2',  
            x : 700,  
            y : 50,  
            anchor : '80%'  
        }]  
    });  

7.Ext.layout.FormLayout 表单专用的布局

FormLayout是AnchorLayout的一个子类,可以在anchor设置宽和高的比例,但他还是主要用于对表单进行布局,他是formPanel的默认布局  

8.Ext.layout.ColumnLayout分列式的布局

    new Ext.Viewport({  
        layout : 'column',  
        items : [{  
            title : '面板1',  
            width : 200  
        },{  
            title : '面板2',  
            columnWidth : .3  
        },{  
            title : '面板3',  
            columnWidth : .7  
        }]  
    });  

9.Ext.layout.BoxLayout

    new Ext.Viewport({  
        layout : {  
            type : 'hbox',  
            padding : '5',  
            align : 'stretch'//自动设置外部容器大小  
        },  
        items : [{  
            xtype : 'button',  
            flex : 1,//属性越大占据空间越大  
            text : 'button1'  
        },{  
            xtype : 'button',  
            flex : 2,//属性越大占据空间越大  
            text : 'button1'  
        }]  
    });  

10.Ext.layout.TabelLayout表格状的布局

-----------------------------------------------------------------------------------  

Extjs-布局-其他相关知识

  -----------------------------------------------------------------------------------

1.Ext.container是所有可布局组件的超类

Layout和items是很重要的两个参数,layoutConfig用来为布局提供配置参数,activeItem表示当前显示那一个子组件,defaultType默认是panel

2. Layout的超类Ext.layout.ContainerLayout

ContainerLayout只设置了所有布局类需要的一些配置,本身没有布局功能,并且不建议使用这个类进行布局

    new Ext.Viewport({  
        //containerLayout对应的关键字  
        layout : 'auto',  
        items : [{  
            title : '面板1',  
            width : 200  
        },{  
            title : '面板2',  
            width : 200  
        }]  
    });  

3. 不指定任何布局时会发生的情况

组件                          默认布局  
Ext.Container               ContainerLayout  
Ext.Viewport                ContainerLayout  
Ext.Panel                   ContainerLayout  
Ext.TabPanel                CardLayout  
Ext.Tip                     ContainerLayout  
Ext.Window                  ContainerLayout  
Ext.form.FieldSet           FormPanel  
Ext.form.FormPanel          FormPanel  
Ext.tree.TreePanel          ContainerLayout  
Ext.grid.GridPanel          ContainerLayout  
Ext.grid.EditorGridPanel    ContainerLayout  
Ext.grid.PropertyPanel      ContainerLayout

4.Ext.Viewport是对整个页面统一布局,

Ext.Viewport直接继承Ext.Container的,基本上没有修改任何操作,只是初始化的时候获得当前页面的宽度和高度,并把自己的一些事件绑定到页面上,来实现跟踪页面大小的改变,动态调节自身的大小功能,一个页面只能有一个Viewport