轉(zhuǎn)自：https://blog.csdn.net/snn1410/article/details/8817821/

? 在標(biāo)準(zhǔn)的html中，需要把輸入項都放到fieldset中，一次來顯示分組結(jié)構(gòu)。雖然EXT中的表單已經(jīng)很漂亮了，但我么依然可以用fieldset來進(jìn)行內(nèi)部分組。

????????為了突出顯示效果，這里我們可以將column和fieldset（fieldset只是一個普通的xtype）結(jié)合起來使用

?1、

var form = new Ext.form.FormPanel({

labelAlign:'right',
title:'布局',
labelWidth:50,
buttonAlign:'center',
frame:true,
width:600,

items:[{
layout:'column',
items:[
{
columnWidth:.33,
layout:'form',
xtype:'fieldset',
autoHeight:true,
defaultType:'textfield',
title:'倆字',
items:[
{fieldLabel:'倆字'},
{fieldLabel:'倆字'}
]
},
{
columnWidth:.33,
layout:'form',
xtype:'fieldset',
autoHeight:true,
style:'margin-left:10px',
defaultType:'textfield',
title:'三字',
items:[
{fieldLabel:'三個字'},
{fieldLabel:'三個字'},
{fieldLabel:'三個字'}
]
},
{
columnWidth:.33,
layout:'form',
xtype:'fieldset',
style:'margin-left:10px',
autoHeight:true,
title:'四字',
defaultType:'textfield',
items:[
{fieldLabel:'四個字'},
{fieldLabel:'四個字'},
{fieldLabel:'四個字'},
{fieldLabel:'四個字'}
]
}]
},{
xtype:'fieldset',
autoHeight:true,
title:'文本域',
items:[{
width:345,
height:100,
xtype:'textarea',
fieldLabel:'文本域'
}]

}],
buttons:[{
text:'按鈕',
handler:function(){}
}]
});
form.render("form");

注意xtyp:'fieldset'如果要內(nèi)部分組，里面的控件要放在items屬性里面

?

?

?

?2、

var set = new Ext.form.FieldSet({
title:'fieldset',
columnWidth:.1,
height:80,
layout:'column',
border:true,
anchor:'100%',
labelWidth:40,
items:[{
columnWidth:.4,
layout:'form',
border: false,
items:[{
xtype:'textfield',
fieldLabel:'t1',
name:'t1'
}]
},{
columnWidth:.4,
layout:'form',
border:false,
items:[{
xtype:'textfield',
fieldLabel:'t2',
name:'t2'
}]
}]
});
var setform = new Ext.form.FormPanel({
width:300,
height:80,
labelWidth:80,
labelAlign:'right',
frame:true,
items:[set]
});
var win = new Ext.Window({
title:'fieldSet的column布局',
layout:'fit',
width:500,
height:380,
closeAction:'hide',
items:[setform]
});
win.show();

注意layout：column位置 ，closeAction:'hide' 這個屬性值不要弄錯了

效果如下圖所示：是以一個窗口的形式顯示的

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/sharpest/p/7651458.html

總結(jié)

以上是生活随笔為你收集整理的60.extjs-布局 （在column布局中使用fieldset 和 在fieldset中使用column布局）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。