ext ratio

Ext.form.Radio的横向和纵向排列
2007-11-29 10:33

横向：整个Radio Group使用column方式进行布局即可横向显示，但这样的话只能显示每一个Radio的BoxLabel，不能为Radio Group指定一个总的Label，所以第一个Radio再使用form布局进行嵌套，用它的fieldLabel作为Radio Group的Label.

纵向：使用Form进行布局即可，但除了第一项之外的所有项需要把labelSeparator指定为空，以免出现多余的冒号。

效果图

配置代码

new Ext.FormPanel({
labelAlign: 'right',
frame:true,
title: 'Radio Group',
bodyStyle:'padding:5px 5px 0',
width: 400,
items: [
{
layout:'column',
items:[
{
layout: 'form',
items: [new Ext.form.Radio({fieldLabel: '横向Radio Group',boxLabel:'opt1', name:'opt1'})]
},
{items: [new Ext.form.Radio({boxLabel:'opt2', name:'opt1'})]},
{items: [new Ext.form.Radio({boxLabel:'opt3', name:'opt1'})]},
{items: [new Ext.form.Radio({boxLabel:'opt3', name:'opt1'})]}
]
},
{
layout: 'form',
items: [
new Ext.form.Radio({fieldLabel: '纵向Radio Group',boxLabel:'opt1', name:'opt2'}),
new Ext.form.Radio({boxLabel:'opt2',labelSeparator:'', name:'opt2'}),
new Ext.form.Radio({boxLabel:'opt3',labelSeparator:'', name:'opt2'}),
new Ext.form.Radio({boxLabel:'opt3',labelSeparator:'', name:'opt2'})
]
}
]
});