ExtJS_extjs의 FieldSet의 열 열 레이아웃

다음은 사용자가 직접 확장한 FieldSet입니다.

코드 복사 코드는 다음과 같습니다.

ME .Base.FieldSet = Ext.extend(Ext.form.FieldSet, {
레이아웃: 'column',
fieldSetItems: [],
autoScroll:false,
기본값: {
레이아웃 : 'form' ,
labelAlign: 'right',
labelWidth: 65,
columnWidth: .25,
기본값: {
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'
}]


　이것 각 구성 요소의 너비를 고정할 수 있으며 항목 수가 증가하면 자동으로 확장되어 깔끔한 효과를 보장합니다.

하지만 표시된 결과에는 항상 테두리가 있습니다. 각 구성 요소를 감싸는 컨테이너에는 테두리가 있어 매우 보기 흉합니다.
실제로 열 모드의 각 컨테이너 구성 항목에
xtype: 'container',
autoEl: {},
를 추가하면 됩니다.

코드 복사 코드는 다음과 같습니다.

ME.Base.FieldSet = Ext.extend(Ext.form.FieldSet, {

layout: 'column',
fieldSetItems: [],
autoScroll:false,
기본값: {
xtype: 'container',
autoEl: {},
layout: 'form' ,
labelAlign: 'right',
labelWidth: 65,
columnWidth: .25,
기본값: {
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)
}
});