Extjs-布局
来源：互联网 发布：易经入门 知乎 编辑：程序博客网 时间：2024/05/17 22:32
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
- EXTJS 布局
- ExtJs 布局
- ExtJs布局
- extjs布局
- Extjs-布局
- extjs布局
- extjs 布局
- extjs 布局
- Extjs-布局
- EXTJs 布局
- extjs 布局
- extJs布局
- Extjs布局
- ExtJS 布局
- Extjs布局
- extjs 布局 layout---Table布局
- extjs 布局 -列布局 column
- ExtJS 经典布局
- IOS 深入浅出Cocoa之 sqlite 数据库
- 一个死锁的简单例子
- 第三次上机实验
- 13 C# 第十二章 委托
- 字符、字符数组、char、string的区别分析
- Extjs-布局
- linux加硬盘
- 开博第一篇文章
- 指针与数组的区别
- 类成员函数的重载、覆盖和隐藏区别
- tomcat启动时卡在couchbase连接上的解决办法（真凶原来是avast）
- 简述数组与指针的区别
- struts标签中<s:action>的用法
- 两个字符串相加用指针实现
