ExtJS的FieldSet的column列布局

2019-11-21 00:58:49

字體：大中小

來源：轉載

供稿：網友

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