Column column layout of FieldSet of ExtJS

Column column layout of FieldSet of ExtJS_extjs

WBOY

Release： 2016-05-16 18:41:30

Original

1140 people have browsed it

The following is your own extended FieldSet:

Copy code The code is as follows:

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

Copy code The code is as follows:

 
new ME.Base.FieldSet({ 
title: 'Basic information', 
autoHeight: true, 
fieldSetItems: [{ 
xtype : 'textfield', 
fieldLabel : "User Name", 
name : 'USER_NAME' 
}, { 
xtype : 'textfield', 
inputType : 'password', 
fieldLabel : "User password", 
name : 'PASSWORD' 
}, { 
xtype : 'textfield', 
fieldLabel : "Mobile phone number" , 
name : 'MOBILE' 
}, { 
xtype : 'textfield', 
fieldLabel : "Mobile phone number", 
name : 'sss' 
},{ 
xtype : 'textfield', 
fieldLabel : "Mobile phone number", 
name : 'eee' 
}] 

　This can achieve a fixed width of each component, and as the It will automatically extend as the number of Items increases, ensuring a neat effect.
However, the displayed result always has a border. The container wrapped around each component has a border, which is very ugly.
In fact, just add
xtype: 'container',
autoEl: {},
to each container configuration item in column mode:

Copy code The code is as follows:

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