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 相关文章推荐
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
Dec 02 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
整理一下常见的IE错误
Nov 18 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
Element MessageBox弹框的具体使用
Jul 27 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 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
PHP学习之整理字符串
2011/04/17 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
Ext javascript建立超链接,进行事件处理的实现方法
2009/03/22 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
js使用递归解析xml
2014/12/12 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
vue2使用keep-alive缓存多层列表页的方法
2018/09/21 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
一步步解析Python斗牛游戏的概率
2016/02/12 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python中logging包的使用总结
2018/02/28 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
村官工作鉴定评语
2014/01/27 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
停课通知书
2015/04/24 职场文书
入党介绍人意见范文
2015/06/01 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
Python Pandas 删除列操作
2022/03/16 Python
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android