ExtJS FieldSet column layout. For more information, see. The extended FieldSet is as follows:
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: '000000'
}
},
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 );
}
});
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: 'ss'
},{
Xtype: 'textfield ',
FieldLabel: "mobile phone number ",
Name: 'Eee'
}]
In this way, each component can be fixed in width and automatically extended as the number of items increases to ensure uniformity.
However, the display result always shows a border, and the container of each component package has a border, which is very ugly.
In fact, it is added to each container configuration item in column mode.
Xtype: 'Container ',
AutoEl :{},
You can:
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: '000000'
}
},
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 );
}
});