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 相关文章推荐
了解jQuery技巧来提高你的代码
Jan 08 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
tab栏切换原理
Mar 22 Javascript
Angular2学习笔记之数据绑定的示例代码
Jan 03 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
如何理解Vue的v-model指令的使用方法
Jul 19 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
如何实现iframe父子传参通信
Feb 05 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编程网上资源导航
2006/10/09 PHP
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
定义php常量的详解
2013/06/09 PHP
php 运算符与表达式详细介绍
2016/11/30 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
详解Vue2.0 事件派发与接收
2017/09/05 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
python删除文件示例分享
2014/01/28 Python
Python生成pdf文件的方法
2014/08/04 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python处理文本换行符实例代码
2018/02/03 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
python线程优先级队列知识点总结
2021/02/28 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
生产管理的三大手法
2013/11/11 职场文书
C++程序员求职信范文
2014/04/14 职场文书
优秀团队申报材料
2014/12/26 职场文书
学校通报表扬范文
2015/05/04 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
入门学习Go的基本语法
2021/07/07 Golang
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle