ExtJS的FieldSet的column列布局


Posted in Javascript onNovember 20, 2009

以下是自己扩展的FieldSet:

ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, { 
layout: 'column', 
fieldSetItems: [], 
autoScroll:false, 
defaults: { 
layout: 'form', 
labelAlign: 'right', 
labelWidth: 65, 
columnWidth: .25, 
defaults: { 
anchor: '96%' 
} 
}, 
initComponent: function(){ 
var thisItems = new Array(); 
var itemsLen = this.fieldSetItems.length; 
if(itemsLen > 0){ 
for (var i = 0; i < itemsLen; i++){ 
thisItems[thisItems.length] = { 
items: this.fieldSetItems[i] 
} 
} 
} 
this.items = thisItems; 
ME.Base.FieldSet.superclass.initComponent.call(this); 
} 
});

new ME.Base.FieldSet({ 
title: '基本信息', 
autoHeight: true, 
fieldSetItems: [{ 
xtype : 'textfield', 
fieldLabel : "用户姓名", 
name : 'USER_NAME' 
}, { 
xtype : 'textfield', 
inputType : 'password', 
fieldLabel : "用户密码", 
name : 'PASSWORD' 
}, { 
xtype : 'textfield', 
fieldLabel : "手机号码", 
name : 'MOBILE' 
}, { 
xtype : 'textfield', 
fieldLabel : "手机号码", 
name : 'sss' 
},{ 
xtype : 'textfield', 
fieldLabel : "手机号码", 
name : 'eee' 
}]

这样可以实现各个组件固定宽度,并随着Item个数的增长而自动延伸,保证整齐效果。

可是,展现的结果总是会出现边框,每一个组件外面包裹的那个容器都有边框,非常难看。

其实在列模式的每个容器配置项里加入
xtype: 'container',
autoEl: {},

即可:

ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, { 
layout: 'column', 
fieldSetItems: [], 
autoScroll:false, 
defaults: { 
xtype: 'container', 
autoEl: {}, 
layout: 'form', 
labelAlign: 'right', 
labelWidth: 65, 
columnWidth: .25, 
defaults: { 
anchor: '96%' 
} 
}, 
initComponent: function(){ 
var thisItems = new Array(); 
var itemsLen = this.fieldSetItems.length; 
if(itemsLen > 0){ 
for (var i = 0; i < itemsLen; i++){ 
thisItems[thisItems.length] = { 
items: this.fieldSetItems[i] 
} 
} 
} 
this.items = thisItems; 
ME.Base.FieldSet.superclass.initComponent.call(this); 
} 
});
Javascript 相关文章推荐
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
Javascript操作表单实例讲解(下)
Jun 20 Javascript
详解javascript appendChild()的完整功能
Aug 18 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
页面版文本框智能提示JS代码
Nov 20 #Javascript
js url传值中文乱码之解决之道
Nov 20 #Javascript
js trim函数 去空格函数与正则集锦
Nov 20 #Javascript
div移动 输入框不能输入的问题
Nov 19 #Javascript
ExtJS Window 最小化的一种方法
Nov 18 #Javascript
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 #Javascript
jquery中的$(document).ready()与window.onload的区别
Nov 18 #Javascript
You might like
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
2021年最新CPU天梯图
2021/03/04 数码科技
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
wamp下修改mysql访问密码的解决方法
2013/05/07 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
javascript 多种搜索引擎集成的页面实现代码
2010/01/02 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
使用CamanJS在Web页面上处理图像的技巧
2015/08/18 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
python3.x上post发送json数据
2018/03/04 Python
Django框架封装外部函数示例
2019/05/28 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
酒店管理专业毕业生推荐信
2013/11/10 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
人事部经理岗位职责
2014/03/07 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
音乐剧猫观后感
2015/06/04 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
Django模型层实现多表关系创建和多表操作
2021/07/21 Python