Ext_通过布局嵌套实现表单元素横排

Ext.onReady(function(){
var config = {
title:'通过布局嵌套实现表单元素横排',
labelWidth:50,
bodyStyle:'padding:5 5 5 5',
frame:false,
height:150,
width:250,
renderTo:'form',
//form中的元素
items:[
//面板1:列布局
{
xtype:'panel',
layout:'column',
border:false,
//子面板默认配置
defaults:{
border:false,
layout:'form',
columnWidth:.5
},
//子面板
items:[
{
items:{
xtype:'radio',
name:'sex',
fieldLabel:'性别',
boxLabel:'男',
checked:true
}
},
{
items:{
xtype:'radio',
name:'sex',
hideLabel:true,
boxLabel:'女'
}
}
]
},
//面板2:列布局
{
xtype:'panel',
layout:'column',
border:false,
//子面板默认配置
defaults:{
border:false,
layout:'form',
columnWidth:.5
},
//子面板
items:[
{
items:{
xtype:'checkbox',
name:'swim',
fieldLabel:'爱好',
boxLabel:'游泳',
checked:true
}
},
{
items:{
xtype:'checkbox',
name:'walk',
hideLabel:true,
boxLabel:'散步'
}
}
]
}
]
}

new Ext.form.FormPanel(config);
});