表单组件Ext.form.Checkbox和Ext.form.Radio，使用样式表实现表单元素横排的方法，通过布局嵌套也可以达到表单元素横排的效果
在示例中直接使用Ext.form.FormPanel（表单面板），在其中嵌套使用column布局来实现横排效果。示例如下：
代码：通过布局嵌套实现表单元素横排示例
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = \'../../extjs2.0/resources/images/default/s.gif\';
var form = new Ext.form.FormPanel({
title:\'通过布局嵌套实现表单横排\',
labelSeparator :\'：\', //分隔符
labelWidth : 50, //标签宽度
bodyStyle:\'padding:5 5 5 5\', //表单边距
frame : false,
height:150,
width:250,
applyTo :\'form\',
items:[
{
xtype : \'panel\',
layout : \'column\', //嵌套列布局
border : false, //不显示边框
defaults : { //应用到每一个子元素上的配置
border : false, //不显示边框
layout : \'form\', //在列布局中嵌套form布局
columnWidth : .5 //列宽
},
items : [
{
labelSeparator :\'：\', //分隔符
items : {
xtype : \'radio\',
name : \'sex\', //名字相同的单选框会作为一组
fieldLabel:\'性别\',
boxLabel : \'男\'
}
},
{
items : {
xtype : \'radio\',
name : \'sex\', //名字相同的单选框会作为一组
hideLabel:true, //横排后隐藏标签
boxLabel : \'女\'
}
}
]
},
{
xtype : \'panel\',
layout : \'column\', //嵌套列布局
border : false, //不显示边框
defaults : { //应用到每一个子元素上的配置
border : false, //不显示边框
layout : \'form\', //在列布局中嵌套form布局
columnWidth : .5 //列宽
},
items : [
{
labelSeparator :\'：\', //分隔符
items : {
xtype : \'checkbox\',
name : \'swim\',
fieldLabel:\'爱好\',
boxLabel : \'游泳\'
}
},
{
items : {
xtype : \'checkbox\',
name : \'walk\',
hideLabel:true, //横排后隐藏标签
boxLabel : \'散步\'
}
}
]
}
]
})
});
</script>
代码演示了布局嵌套实现表单元素横排的实现方式，这种方式不但可以用在表单元素的横排上，它可以用在更广泛的场合，将各种布局组合使用达到精确定位页面元素的目的。运行效果如图