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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
vue实现的树形结构加多选框示例
Feb 02 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
一个php作的文本留言本的例子(五)
2006/10/09 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
js取得url地址参数实例
2013/02/22 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
react中使用swiper的具体方法
2018/05/15 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
易程科技软件测试笔试
2013/03/24 面试题
户外活动总结范文
2014/04/30 职场文书
总经理助理岗位职责范本
2014/07/20 职场文书
环保项目建议书
2014/08/26 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
详解GaussDB for MySQL性能优化
2021/05/18 MySQL