ExtJS的FieldSet的column列布局

以下是自己扩展的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个数的下降而自动延伸extjs fieldset 隐藏，保证整齐效果。

可是extjs fieldset 隐藏，展现的结果总是会出现边框，每一个组件外面包裹的那种容器都有边框，非常难看。

其实在列方式的每个容器配置项里加入

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);

}

});

本文链接

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-140303-1.html