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实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
JavaScript中的原型链prototype介绍
Dec 30 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
Jan 07 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
微信小程序用户登录和登录态维护的实现
Dec 10 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中的路径问题与set_include_path使用介绍
2014/02/11 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
Yaf框架封装的MySQL数据库操作示例
2019/03/06 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
2014/05/04 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python3中多线程编程的队列运作示例
2015/04/16 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
基于Python获取照片的GPS位置信息
2020/01/20 Python
如何使用python切换hosts文件
2020/04/29 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
Python实现上下文管理器的方法
2020/08/07 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
C语言变量的命名规则都有哪些
2013/12/27 面试题
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
工程安全员岗位职责
2014/03/09 职场文书
政风行风整改报告
2014/11/06 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL