Home >Web Front-end >JS Tutorial >Column column layout of FieldSet of ExtJS_extjs

Column column layout of FieldSet of ExtJS_extjs

WBOY
WBOYOriginal
2016-05-16 18:41:301191browse

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);
}
});
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn