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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
Apr 12 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
vue 实现全选全不选的示例代码
Mar 29 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
页面版文本框智能提示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
phpmyadmin操作流程
2006/10/09 PHP
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
php实现微信支付之退款功能
2018/05/30 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
js异常捕获方法介绍
2013/04/10 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
简单解决Python文件中文编码问题
2015/11/22 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
实习教师自我鉴定
2013/09/27 职场文书
服装公司总经理岗位职责
2013/11/30 职场文书
新闻发布会主持词
2014/03/28 职场文书
万里长城导游词
2015/01/30 职场文书
客房部经理岗位职责
2015/02/02 职场文书
学会感恩主题班会
2015/08/12 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
《检阅》教学反思
2016/02/22 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
导游词之南京汤山温泉
2019/11/26 职场文书