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 replace 字符替换实现代码
Dec 02 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
值得收藏的vuejs安装教程
Nov 21 Javascript
javascript实现计算指定范围内的质数示例
Dec 29 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
PHP无限分类(树形类)
2013/09/28 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
jQuery树形控件zTree使用小结
2016/08/02 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
PyMongo安装使用笔记
2015/04/27 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
pandas把所有大于0的数设置为1的方法
2019/01/26 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
如何通过Python实现标签云算法
2019/07/02 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
大整数数相乘的问题
2012/07/22 面试题
演讲稿开场白
2014/01/13 职场文书
《乞巧》教学反思
2014/02/27 职场文书
爱之链教学反思
2014/04/30 职场文书
优质服务演讲稿
2014/05/14 职场文书
结对共建协议书
2014/08/20 职场文书
数学教师个人工作总结
2015/02/06 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
欢送会主持词
2015/07/01 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android