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 相关文章推荐
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
老生常谈 关于JavaScript的类的继承
Jun 24 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
vue的mixins属性详解
Mar 14 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
小程序跳转H5页面的方法步骤
Mar 06 Javascript
TypeScript的安装、使用、自动编译的实现
Apr 10 Javascript
微信小程序实现弹幕墙(祝福墙)
Nov 18 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的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
php实现批量修改文件名称的方法
2016/07/23 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
Vue常用API、高级API的相关总结
2021/02/02 Vue.js
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python读取二进制mnist实例详解
2017/05/31 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
Pandas GroupBy对象 索引与迭代方法
2018/11/16 Python
python实现Virginia无密钥解密
2019/03/20 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
详解Python绘图Turtle库
2019/10/12 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
智能室内花园:Click & Grow
2021/01/29 全球购物
我的长生果教学反思
2014/04/28 职场文书
民主生活会发言材料
2014/10/20 职场文书