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判断浏览器是否是IE的比较好的办法
May 08 Javascript
js 调整select 位置的函数
Feb 21 Javascript
来自chinaz的ajax获取评论代码
May 03 Javascript
javascript之学会吝啬 精简代码
Apr 25 Javascript
javascript中parentNode,childNodes,children的应用详解
Dec 17 Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
Sep 16 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 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 MySQL与分页效率
2008/06/04 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
PHP数组实例总结与说明
2011/08/23 PHP
php设置编码格式的方法
2013/03/05 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
Yii实现文章列表置顶功能示例
2016/10/18 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
使用layui的router来进行传参的实现方法
2019/09/06 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
Python程序设计入门(2)变量类型简介
2014/06/16 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
用纯CSS3实现网页中常见的小箭头
2017/10/16 HTML / CSS
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
雪山饭庄的创业计划书范文
2014/01/18 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
领导班子整改方案
2014/10/25 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
领导参观欢迎词
2015/01/26 职场文书
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python