Extjs面板和布局初探
面板相当于一张干净的白纸,如果直接在上面添加内容,将很难控制面板中内容的显示位置,面板元素越多就越显得凌乱,所以需要在面板上划分不同的区域,将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持,主要包括如下10种, 我自己总结了两句话, 先把它背起来,再慢慢研究这十种布局是怎么玩的."列表自折容, 卡表锚(描)边绝", 稍微胡说下, 供大家能更快记忆. 大家都知道html有列表, 那么列表把自己的容貌给折毁了,这叫"列表自折容", 有卡(信用卡,银行卡,随意啦), 有表(瑞士, OMEGA) 当然给自己描边(装饰自己),天下一绝啊,所以叫"卡表描边绝". 言归正传, 这十种布局方式分别为:
•ColumnLayout(列布局), 在面板设置的对应代码:layout : 'column', 即layout配置项名称为:column
•FormLayout(表单布局), 在面板设置的对应代码:layout : 'form', 即layout配置项名称为:form
•FitLayout(自适应布局), 在面板设置的对应代码:layout : 'fit', 即layout配置项名称为:fit
•AccordionLayout(折叠布局), 在面板设置的对应代码:layout : 'accordion', 即layout配置项名称为:accordion
•ContainerLayout(容器布局)
•CardLayout(卡片式布局), 在面板设置的对应代码:layout : 'card', 即layout配置项名称为:card
•TableLayout(表格布局), 在面板设置的对应代码:layout : 'table', 即layout配置项名称为:table
•AnchorLayout(锚点布局), 在面板设置的对应代码:layout : 'anchor', 即layout配置项名称为:anchor
•BorderLayout(边框布局), 在面板设置的对应代码:layout : 'border', 即layout配置项名称为:border
•AbsoluteLayout(绝对位置布局), 在面板设置的对应代码:layout : 'absolute', 即layout配置项名称为:absolute
接下来分别介绍这10种布局类的特点及使用方式。
本文所用的html文本如下。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <html> 2 <head> 3 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 4 <title>Test Extjs Panel</title> 5 <script type="text/javascript" src="Ext-4-Lib/datagrid/include-ext.js"></script> 6 <script type="text/javascript" src="Ext-4-Lib/datagrid/options-toolbar.js"></script> 7 <script type="text/javascript" src="Ext-4-Lib/class/panel.js"></script> 8 </head> 9 <body> 10 <div id="panel"> 11 </div> 12 </body> 13 </html>
一: 列布局
列布局Ext.layout.ColumnLayout对应面板布局layout配置项的名称为column。这是一种多列风格的布局样式,每一列的宽度都可以根据百分比或固定值来进行设置,高度允许根据内容进行变化,它支持一个特殊的属性columnWidth,每一个加入到容器中的子面板都可以通过columnWidth配置项指定百分比或使用width配置项指定固定值,来确定列宽。width配置项是以像素为单位的固定宽度,必须是大于或等于1的数字。columnWidth配置项是以百分比为单位的相对宽度,必须是大于0小于1的小数,例如“.25”。注意:所有列的columnWidth值相加必须等于1。1. 指定固定列宽代码5-15中将创建包含两个子面板的列布局示例。
二: 表单布局
Ext.layout.FormLayout是为表单特殊设计的布局,用来管理表单字段的显示,通常情况下直接使用Ext.form.FormPanel表单面板,因为它已经内置了表单布局,并且提供了表单提交、读取等表单的功能。使用form布局的容器可以使用一些表单特有的配置项,它们包括:
•hideLabels: (Boolean):是否隐藏字段标签,默认为false。
•itemCls: (String):每个字段项和字段标签上的样式类,默认值为‘x-form-item’。•labelAlign: (String):字段标签的对齐方式,默认为空表示左对齐。
•labelPad: (Number):字段标签与字段直接的空白,默认为5,该项只在提供labelWidth配置项的情况下生效。
•labelWidth: (Number):字段标签的宽度,默认为100。
任何组件都可以加入到表单布局的容器中,但是扩展自Ext.form.Field类的组件可以支持一些表单项的特殊属性,它们包括:
•clearCls: (String):应用到专门的清除div上的样式,默认为‘x-form-clear-left’。•fieldLabel: (String):字段标签上的文本,默认为‘’。
•hideLabel: (Boolean):设置是否隐藏标签和分割符,默认为false。
•itemCls: (String):应用到表单字段及标签上的样式类,默认为‘x-form-item’。•labelSeparator: (String):字段标签和字段本身直接的分隔符,默认为‘:’。•labelStyle: (String):应用到字段标签上的样式类。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 Ext.onReady(function(){ 2 // Ext.BLANK_IMAGE_URL = 'images/panelBack.jpg'; 3 Ext.QuickTips.init(); 4 var panel = Ext.create('Ext.Panel', { 5 title: '登录', 6 // tbar : ['顶端工具栏(top toolbars)'], 7 // bbar : ['底端工具栏(bottom toolbars)'], 8 height : 400, 9 width : 600, 10 frame : true, 11 // applyTo : 'panel', 12 layout : 'form', 13 renderTo: 'panel', 14 layoutSeparator : ': ', 15 // autoLoad: 'testPaging.html', 16 collapsible : true, 17 closable : true, 18 bodyStyle : 'background-color:#FFFFAA', 19 defaultType : 'textfield', 20 defaults : { 21 msgTarget : 'side' 22 }, 23 // html : '<div>面板体(body)</div>', 24 items : [ 25 { 26 fieldLabel : '用户名', 27 allowBlank : false, 28 width : 250 29 }, 30 { 31 fieldLabel : '密码', 32 allowBlank : false, 33 width : 250 34 } 35 ], 36 tools : [//设置面板头部功能区 37 { 38 id : 'toggle', 39 tooltip: 'toggle' 40 }, 41 {id : 'maximize'} 42 ], 43 buttons : [ 44 new Ext.Button({ 45 text : '登录' 46 }), 47 new Ext.Button({ 48 text : '取消' 49 }) 50 ] 51 }); 52 panel.initResizable(); 53 panel.initDraggable(); 54 55 });
三: 自适应布局
Ext.layout.FitLayout是布局的基础类,对应面板布局配置项(layout)的名称为fit,使用fit布局将使面板子元素自动充满容器,如果在当前容器中存在多个子面板则只有第一个会被显示。
注意:在本节的示例之前会简单地介绍新概念,组件的xtype类型。xtype类型相当于组件的别名,通过使用xtype类型可以实现组件的延时创建,并提供一般组件对应xtype类型的详细列表。读者要形成使用xtype的习惯,而减少new关键字的使用。
四: 折叠布局
Ext.layout.Accordion扩展自Ext.layout.FitLayout布局,对应面板布局(layout)配置项的名称为accordion。该布局会包含多个子面板,任何时候都只有一个子面板处于打开状态,每个子面板都内置了对展开和收缩功能的支持。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 Ext.onReady(function(){ 2 // Ext.BLANK_IMAGE_URL = 'images/panelBack.jpg'; 3 Ext.QuickTips.init(); 4 var panel = Ext.create('Ext.Panel', { 5 title: '登录', 6 height : 400, 7 width : 400, 8 frame : true, 9 layout : 'accordion', 10 renderTo: 'panel', 11 layoutSeparator : ': ', 12 collapsible : true, 13 closable : true, 14 bodyStyle : 'background-color:#FFFFAA', 15 layoutConfig : { 16 activeOnTop : true, // 打开的子面板置顶 17 fill : true, // 子面板充满父面板的剩余空间 18 hideCollapseTool : false, // 是否隐藏子面板的展开收缩按钮 19 titleCollapse : true, // 子面板标题 20 animate : true // 使用动画效果 21 }, 22 items : [ 23 { 24 title : '折叠面板一', 25 html : 'hello1' 26 }, 27 { 28 title : '折叠面板二', 29 html : 'hello2' 30 }, 31 { 32 title : '折叠面板三', 33 html : 'hello3' 34 } 35 ], 36 buttons : [ 37 new Ext.Button({ 38 text : '登录' 39 }), 40 new Ext.Button({ 41 text : '取消' 42 }) 43 ] 44 }); 45 panel.initResizable(); 46 panel.initDraggable(); 47 48 });
五: 容器布局
Ext.layout.ContainerLayout提供了所有布局类的基本功能,它没有可视化的外观,只是提供容器作为布局的基本逻辑,这个类通常被扩展而不通过new关键字直接创建。如果面板(panel)没有指定任何布局类,则它将会作为默认布局来创建。
六: 卡片布局
Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局,对应面板布局(layout)配置项的名称为card。该布局会包含多个子面板,任何时候都只有一个子面板处于显示状态,这种布局类经常用来制作向导和标签页。该布局的重点方式是setActiveItem,因为一次只能显示一个子面板,所以切换子面板的唯一途径就是调用setActiveItem方法,它接受一个子面板id或索引作为参数。CardLayout布局并没有提供一个子面板的导航机制,导航逻辑需要开发人员自己实现。
七: 表格布局
Ext.layout.TableLayout对应面板布局layout配置项的名称为table。这种比较允许你非常容易地渲染内容到HTML表格中,可以指定列数(columns),跨行(rowspan),跨列(colspan),可以创建出复杂的表格布局。
注意:必须使用layoutConfig属性来指定属于此布局的配置,table布局仅有唯一的布局配置项columns,而包含在其中的子面板会具有rowspan和colspan两个配置项。
八: 锚点布局
Ext.layout.AnchorLayout是根据容器大小为其所包含的子面板进行定位的布局,对应面板布局(layout)配置项的名称为anchor。如果容器大小发生变化,所有子面板的位置都会根据规则重新计算,并自动渲染。使用anchor布局需要注意配置项的使用。
anchorSize(父容器提供)。anchor布局提供了anchorSize配置项用来设置虚拟容器的大小,默认情况下anchor布局是根据容器自身的大小来进行计算定位的。如果提供了anchorSize属性则anchor布局就会根据该尺寸生成一个虚拟容器,然后根据这个虚拟容器的大小来进行计算定位。anchor(子容器提供)。加入到使用anchor布局面板中的子面板也都支持一个anchor配置项,
它是一个包含2个值的字符串,水平值和垂直值,例如:‘100% 50%’,这个值告知父容器应该怎样为加入到其中的子面板进行定位,有效值包括如下3类。
百分比(Percentage):1~100之间的任意百分比,第1项数值表示子面板占父容器宽度的百分比,第2项数值表示子面板占父容器宽高的百分比,例如‘100% 50%’表示,子面板宽度为父容器的100%,而高度为父容器的1/2,如果只提供一个值(如:‘50%’)则只对子面板的宽度生效,高度保持默认值。
偏移值(Offsets):任意整数,可以为正数也可以是负数,第1项数值表示子面板到父容器右边缘的偏移量,第2项数值表示子面板到父容器下边缘的偏移量,例如‘-50 -100’表示,子面板距父容器的右边缘偏移50像素,即子面板的宽度为父容器的宽度减去50像素;子面板距父容器的下边缘偏移100像素,即子面板高度为父容器的高度减去100像素。如果只提供一个值(如:‘-50’)则只对子面板的宽度生效,高度保持默认值。
参考边(Sides):有效的值包括‘right’(或‘r’)和‘bottom’(或‘b’)。要求容器设置固定的大小或提供相应的anchorSize配置项才会有正确的效果,例如‘r b’,说明父容器会计算与子容器宽度和高度的差值,然后按父容器体(body)的实际宽度和高度减去这个差值,重新为子面板定位。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 Ext.onReady(function(){ 2 // Ext.BLANK_IMAGE_URL = 'images/panelBack.jpg'; 3 Ext.QuickTips.init(); 4 var panel = Ext.create('Ext.Panel', { 5 title: '登录', 6 height : 400, 7 width : 400, 8 frame : true, 9 layout : 'anchor', 10 renderTo: 'panel', 11 layoutSeparator : ': ', 12 collapsible : true, 13 closable : true, 14 bodyStyle : 'background-color:#FFFFAA', 15 items : [ 16 { 17 title : '锚点面板一', 18 html : 'hello1', 19 anchor : '30% 70%' // '-100 -200' 20 }//, 21 // { 22 // title : '锚点面板二', 23 // html : 'hello2', 24 // anchor : '30% 70%' // '-100 -200' 25 // }, 26 // { 27 // title : '锚点面板三', 28 // html : 'hello3', 29 // anchor : '30% 70%' // '-100 -200' 30 // } 31 ], 32 buttons : [ 33 new Ext.Button({ 34 text : '登录' 35 }), 36 new Ext.Button({ 37 text : '取消' 38 }) 39 ] 40 }); 41 panel.initResizable(); 42 panel.initDraggable(); 43 44 });
九: 边框布局
Ext.layout.BorderLayout对应面板布局layout配置项的名称为
border。该布局包含多个子面板,是一个面向应用的UI风格的布局,它将整个容器分为5个部分,分别是east、south、west、north、center。加入到容器中的子面板需要指定region配置项来告知容器要加入到哪个部分,并且该布局还内建了对面板分隔栏的支持。
十: 绝对位置布局
Ext.layout.AbsoluteLayout扩展自Ext.layout.AnchorLayout布局,对应面板布局(layout)配置项的名称为absolute。它可以根据子面板中配置的x/y坐标进行定位,并且坐标值支持使用固定值和百分比两种形式。
草原战狼淘宝小店:http://xarxf.taobao.com/ 淘宝搜小矮人鞋坊,主营精致美丽时尚女鞋,为您的白雪公主挑一双哦。谢谢各位博友的支持。
=================================================================================================
======================== 以上分析仅代表个人观点,欢迎指正与交流 ===============
======================== 尊重劳动成果,转载请注明出处,万分感谢 ================
=================================================================================================