ExtJS的FieldSet的column列布局

作者: 一哥一射
来源: 51数据库
2021-07-08

以下是自己扩展的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); 
} 
}); 