Extjs-布局

来源：互联网发布：闪电电商和一洋淘宝编辑：程序博客网时间：2024/06/10 01:07

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表格状的布局