详解extjs的灵活布局的表单
我们发现,布局其实是由行和列组件组成,分成由左往右和由上往下两个方向,由左往右叫column,由上往下叫form。
整个大的表单是form布局,从上往下放置了5个小布局,在这里我以行n标记。
行1:行1从左往右有3个表单组件,所以是column布局;
{ layout:"column", items:[{},{},{}] //items表示指定布局内的表单组件集合,在此有3个 }
行1内其实还有3个form布局,因为每个布局中都有一个表单组件,所以看起来并不是那么明显,我们完全可以放置多个表单组件到布局中。
<strong>{ layout:"form", items:[{}] //只有一个表单组件 } </strong>
items:[{//行1 layout:"column",//从左往右的布局 items:[{ columnWidth:.3,//该列在整行中所占的百分比 layout:"form",//从上往下的布局 items:[{ xtype:"textfield", fieldLabel:"姓名", allowBlank:false, width:120 }] },{ columnWidth:.3,//该列在整行中所占的百分比 layout:"form",//从上往下的布局 items:[{ xtype:"textfield", inputType:"password", fieldLabel:"密码", allowBlank:false, minLength:6, maxLength:16, minLengthText:"温馨提示 :密码长度最小为6个字符", maxLengthText:"温馨提示 :密码长度最小为16个字符", width:120 }] },{ columnWidth:.3,//该列在整行中所占的百分比 layout:"form",//从上往下的布局 items:[{ xtype:"textfield", fieldLabel:"邮箱", vtype:"email", allowBlank:false, width:120 }] }] }
自己的一个实现:
var collectionRuleForm = new Ext.FormPanel({ name : 'collectionRuleForm', labelAlign : 'right', labelWidth : 80, frame : true, bodyStyle : 'padding:5 5 5 5', items:[{//行1 layout:"column",//从左往右的布局 items:[{ columnWidth:.3,//该列在整行中所占的百分比 layout:"form",//从上往下的布局 items:[{ name : 'title', fieldLabel : '名称', xtype : 'textfield', allowBlank : false, anchor : '99%' }] },{ columnWidth:.3,//该列在整行中所占的百分比 layout:"form",//从上往下的布局 items:[{ name : 'sort_by', fieldLabel : '排序', xtype : 'numberfield', anchor : '99%' }] },{ columnWidth:.3,//该列在整行中所占的百分比 layout:"form",//从上往下的布局 items:[{ name : 'bank_desc', fieldLabel : '类型描述', allowBlank : true, xtype : 'textarea', anchor : '99%' }] }] },{//第二行 layout:"column",//从左往右的布局 items:[{ columnWidth:.3,//该列在整行中所占的百分比 layout:"form",//从上往下的布局 items:[{ name : 'title', fieldLabel : '名称', xtype : 'textfield', allowBlank : false, anchor : '99%' }] },{ columnWidth:.3,//该列在整行中所占的百分比 layout:"form",//从上往下的布局 items:[{ name : 'sort_by', fieldLabel : '排序', xtype : 'numberfield', anchor : '99%' }] },{ columnWidth:.3,//该列在整行中所占的百分比 layout:"form",//从上往下的布局 items:[{ name : 'bank_desc', fieldLabel : '类型描述', allowBlank : true, xtype : 'textarea', anchor : '99%' }] }] }] });
转载自:http://z-xiaofei168.iteye.com/blog/1136291
相关推荐
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
NULL 博文链接:https://fxiaozj.iteye.com/blog/1174901
ExtJs中表单formPanel的横向布局
折叠布局Ext.layout.AnchorLayout 边框布局Ext.layout.BorderLayout 卡片式布局Ext.layout.CardLayout 列布局Ext.layout.ColumnLayout 填充布局xt.layout.FitLayout 表单布局Ext.layout.FormLayout 表格布局Ext....
纯Extjs代码,对初学Ext有点点帮助
ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解) ExtJS资料笔记(extjs各个属性的详解)
ExtJS布局之border实例,有代码 border布局是常见的布局样式,下面是一个实际项目的示例,比较简单,仅供初学者参考。
ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档,详细讲诉了各种布局,并附源码与界面展示,希望能给你带来帮助
很好的ext页面布局自动生成功能,快速布局,减少你页面开发时间!用法:解压->添加文件夹到一个web工程当中->进入index.html进入页面编辑就可以自由设计你的布局了,代码在查看/修改中可以看到,只需复制粘贴到自己...
参考以前资源,用extJS4.2.1版本做的一个demo示例,希望对大家有用。
资源名称:Extjs中布局的组合使用 中文WORD版内容简介:本文档主要讲述的是Extjs中布局的组合使用;Extjs4.1中布局很经典,也很好用,关键是如何组合布局,组合布局,不仅要达到我们想要的界面效果,还要注意因为...
extjs-form组件配置参数详解 extjs各种组件说明
用ExtJS4.1布局后台系统,这个是自写的js,extjs4.1的源码包,需要到extjs.org.cn下载。
Extjs布局实例
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已
Extjs布局教程,Extjs 布局,非常好用的Extjs布局教程
extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习extjs,表单学习
左边菜单,右边是内容,北边是log图片 简单首页布局示例
本工程为java Web 工程,旨在演示如何提交Extjs 中的表单。 本工程编码方式:UTF-8; 欢迎下载。