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 相关文章推荐
JS实现self的resend
Jul 22 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
Angular实现form自动布局
Jan 28 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 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创建多级目录代码
2008/06/05 PHP
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
asp.net下利用js实现返回上一页的实现方法小集
2009/11/24 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
Dojo获取下拉框的文本和值实例代码
2016/05/27 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
Node.JS使用Sequelize操作MySQL的示例代码
2017/10/09 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
Python3中多线程编程的队列运作示例
2015/04/16 Python
python遍历数组的方法小结
2015/04/30 Python
Python内建模块struct实例详解
2018/02/02 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
html5指南-6.如何创建离线web应用程序实现离线访问
2013/01/07 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
工商治理实习生的自我评价分享
2014/02/20 职场文书
2014全国两会心得体会
2014/03/17 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
党员自我评价2015
2015/03/03 职场文书
爱国主义电影观后感
2015/06/18 职场文书
毕业生入职感言
2015/07/31 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript