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 相关文章推荐
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
javascript中clone对象详解
Dec 03 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
详解a++和++a的区别
Aug 30 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
Vue SPA 首屏优化方案
Feb 26 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
PHP 观察者模式的实现代码
2013/05/10 PHP
PHP Global变量定义当前页面的全局变量实现探讨
2013/06/05 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
Laravel框架创建路由的方法详解
2019/09/04 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
[59:08]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第一局
2016/02/27 DOTA
Django实现快速分页的方法实例
2017/10/22 Python
Python3实现购物车功能
2018/04/18 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
Python 字符串换行的多种方式
2018/09/06 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
简历上的自我评价怎么写
2014/01/28 职场文书
火锅店创业计划书范文
2014/02/02 职场文书
应届大学生自荐书
2014/06/17 职场文书
党员个人公开承诺书
2014/08/29 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript