Extjs中checkbox和radio的使用的小例子

文件：edit.js

Ext.define('BOOK.view.Edit', {    extend: 'Ext.container.Container',    alias : 'widget.bookEdit',    layout:'border',//采用fit布局    /** 初始化方法 */    initComponent: function() {    this.items = [this.CheckBoxAndRadio()];    this.callParent(arguments);    },        /*---------------------复选和单选按钮-----------------*/    CheckBoxAndRadio: function(){    this.queryFieldForm = Ext.create("Ext.form.Panel",{    id: 'checkBoxAndRadioForm'    ,name: 'checkBoxAndRadioForm'    ,margin: 1    ,region: 'north'    ,layout: "column"    ,tbar: [    {xtype: 'button'     ,text: '输出多选数据'     ,id: 'outputCheckBox'    },     '-',     {xtype : 'button', text : '输出单选数据', id : 'outputRadio'}]    ,items:[    {xtype:'checkboxgroup',name:'checkboxgroup',     id: 'checkboxgroup', fieldLabel: 'Two Columns',columnWidth:0.7,     items: [    { boxLabel: 'Item 1', name: 'cb', inputValue: '1' },                { boxLabel: 'Item 2', name: 'cb', inputValue: '2' },                { boxLabel: 'Item 3', name: 'cb', inputValue: '3' },                { boxLabel: 'Item 4', name: 'cb', inputValue: '4' },                { boxLabel: 'Item 5', name: 'cb', inputValue: '5' },                { boxLabel: 'Item 6', name: 'cb', inputValue: '6' }            ]}            ,{xtype:'radiogroup', name:'radiogroup', fieldLabel:'radios',             columnWidth:0.7,items: [            { boxLabel: 'Item 1', name: 'rb', inputValue: '1' ,id: 'radiogroup'},             { boxLabel: 'Item 2', name: 'rb', inputValue: '2' },            { boxLabel: 'Item 3', name: 'rb', inputValue: '3' },            { boxLabel: 'Item 4', name: 'rb', inputValue: '4' },            { boxLabel: 'Item 5', name: 'rb', inputValue: '5' },            { boxLabel: 'Item 6', name: 'rb', inputValue: '6' }            ]}        ]    });    return this.queryFieldForm;    }    });

文件：bookCtrl.js

Ext.define('BOOK.controller.BookCtrl', {extend: 'Ext.app.Controller',    views: [//控制器的视图列表            'Edit'    ],    init: function() {this.control({// 输出'#outputCheckBox': {click: this.outputCheckBox},'#outputRadio': {click: this.outputRadio}    });    }        // 输出多选数据    ,outputCheckBox: function(){    var itcIds = '';    var cbgItem = Ext.getCmp('checkboxgroup').getChecked();    Ext.Array.each(cbgItem, function(item){    itcIds = itcIds + ',' + item.inputValue;    });        Ext.MessageBox.alert('提示', '您选择的是' + itcIds);    }        // 输出单选数据    ,outputRadio: function(){    Ext.MessageBox.alert(Ext.getCmp('radiogroup').getGroupValue());    }    });

运行的效果图：

radio注意问题：
1、要为第一个radio指定id属性；
2、同一个radiogroup中的radio的name的值必须相同！


好吧，我就是死在了第二条上。。。希望大家不要在这两点上花太多时间！