本人是菜鸟,苦于没有什么例子可以参照,写出的单选按钮总是可多选。请各位大虾给些简单的例子把。

解决方案 »

  1.   


    var radioGroup = {
            
            xtype: 'fieldset',
            title: 'Radio Groups',
            autoHeight: true,
            items: [{
                xtype: 'textfield',
                name: 'txt-test4',
                fieldLabel: 'Alignment Test',
                anchor: '95%'
            },{
                xtype: 'radiogroup',
                fieldLabel: 'Auto Layout',
                items: [
                    {boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1},
                    {boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true},
                    {boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3},
                    {boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4},
                    {boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5}
                ]
            },{
                xtype: 'radiogroup',
                fieldLabel: 'Single Column',
                itemCls: 'x-check-group-alt',
                columns: 1,
                items: [
                    {boxLabel: 'Item 1', name: 'rb-col', inputValue: 1},
                    {boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true},
                    {boxLabel: 'Item 3', name: 'rb-col', inputValue: 3}
                ]
            },{
                xtype: 'radiogroup',
                fieldLabel: 'Multi-Column<br />(horiz. auto-width)',
                columns: 3,
                items: [
                    {boxLabel: 'Item 1', name: 'rb-horiz', inputValue: 1},
                    {boxLabel: 'Item 2', name: 'rb-horiz', inputValue: 2, checked: true},
                    {boxLabel: 'Item 3', name: 'rb-horiz', inputValue: 3},
                    {boxLabel: 'Item 4', name: 'rb-horiz', inputValue: 4},
                    {boxLabel: 'Item 5', name: 'rb-horiz', inputValue: 5}
                ]
            },{
                xtype: 'radiogroup',
                fieldLabel: 'Multi-Column<br />(vert. auto-width)',
                itemCls: 'x-check-group-alt',
                columns: 3,
                vertical: true,
                items: [
                    {boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1},
                    {boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true},
                    {boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3},
                    {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},
                    {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}
                ]
            },{
                xtype: 'radiogroup',
                fieldLabel: 'Multi-Column<br />(custom widths)',
                columns: [100, 100],
                vertical: true,
                items: [
                    {boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1},
                    {boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true},
                    {boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3},
                    {boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4},
                    {boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5}
                ]
            },{
                xtype: 'radiogroup',
                itemCls: 'x-check-group-alt',
                fieldLabel: 'Custom Layout<br />(w/ validation)',
                allowBlank: false,
                anchor: '95%',
                items: [{
                    columnWidth: '.25',
                    items: [
                        {xtype: 'label', text: 'Heading 1', cls:'x-form-check-group-label', anchor:'-15'},
                        {boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1},
                        {boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2}
                    ]
                },{
                    columnWidth: '.5',
                    items: [
                        {xtype: 'label', text: 'Heading 2', cls:'x-form-check-group-label', anchor:'-15'},
                        {boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3}
                    ]
                },{
                    columnWidth: '.25',
                    items: [
                        {xtype: 'label', text: 'Heading 3', cls:'x-form-check-group-label', anchor:'-15'},
                        {boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4},
                        {boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5}
                    ]
                }]
            }]
        };