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计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 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
php下把数组保存为文件格式的实例应用
2010/02/08 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
javascript拖拽应用实例(二)
2016/03/25 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
python 从list中随机取值的方法
2020/11/16 Python
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
物理专业本科生自荐信
2014/01/30 职场文书
初一学生评语大全
2014/04/24 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
律师函格式范本
2015/05/27 职场文书
负责培养人意见
2015/06/05 职场文书
决心书格式范文
2015/09/23 职场文书
海贼王十大逆天果实 魂魂果实上榜,岩浆果实攻击力最强
2022/03/18 日漫