关于ExtJS的FieldSet的‘column’列布局

　　以下是自己扩展的FieldSet：

 1ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, {
 2 layout: 'column',
 3 fieldSetItems: [],
 4 autoScroll:false,
 5 defaults: {
 6  layout: 'form',
 7  labelAlign: 'right',
 8  labelWidth: 65,
 9  columnWidth: .25,
10  defaults: {
11   anchor: '96%'
12  }
13 },
14 initComponent: function(){
15  var thisItems = new Array();
16  var itemsLen = this.fieldSetItems.length;
17  if(itemsLen > 0){
18   for (var i = 0; i < itemsLen; i++){
19    thisItems[thisItems.length] = {
20     items: this.fieldSetItems[i]
21    }
22   }
23  }
24  this.items =  thisItems;
25  ME.Base.FieldSet.superclass.initComponent.call(this);
26 }
27});

 

 

 1new ME.Base.FieldSet({
 2    title: '基本信息',
 3    autoHeight: true,
 4    fieldSetItems: [{
 5     xtype : 'textfield',
 6     fieldLabel : "用户姓名",
 7     name : 'USER_NAME'
 8    }, {
 9     xtype : 'textfield',
10     inputType : 'password',
11     fieldLabel : "用户密码",
12     name : 'PASSWORD'
13    }, {
14     xtype : 'textfield',
15     fieldLabel : "手机号码",
16     name : 'MOBILE'
17    }, {
18     xtype : 'textfield',
19     fieldLabel : "手机号码",
20     name : 'sss'
21    },{
22     xtype : 'textfield',
23     fieldLabel : "手机号码",
24     name : 'eee'
25    }]

 

 

　　这样可以实现各个组件固定宽度，并随着Item个数的增长而自动延伸，保证整齐效果。

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

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

  xtype: 'container',
  autoEl: {},

　　即可：

 

 1ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, {
 2 layout: 'column',
 3 fieldSetItems: [],
 4 autoScroll:false,
 5 defaults: {
 6  xtype: 'container',
 7  autoEl: {},
 8  layout: 'form',
 9  labelAlign: 'right',
10  labelWidth: 65,
11  columnWidth: .25,
12  defaults: {
13   anchor: '96%'
14  }
15 },
16 initComponent: function(){
17  var thisItems = new Array();
18  var itemsLen = this.fieldSetItems.length;
19  if(itemsLen > 0){
20   for (var i = 0; i < itemsLen; i++){
21    thisItems[thisItems.length] = {
22     items: this.fieldSetItems[i]
23    }
24   }
25  }
26  this.items =  thisItems;
27  ME.Base.FieldSet.superclass.initComponent.call(this);
28 }
29});
30