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'})
                 ]
             }
         ]
     });