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实现控制内容的向上向下滚动效果
Jun 26 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
深入浅析JavaScript面向对象和原型函数
Feb 06 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 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 时间计算问题小结
2009/01/04 PHP
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
php header Content-Type类型小结
2011/07/03 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
php多线程并发实现方法
2016/09/30 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
基于jquery实现漂亮的动态信息提示效果
2011/08/02 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
js制作提示框插件
2020/12/24 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
详解基于Scrapy的IP代理池搭建
2020/09/29 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
法制工作总结2015
2015/07/23 职场文书
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android