ExtJs 入门教程九[单选组：RadioGroup、复选组：CheckBoxGroup]

一、效果

二、代码

 //----------------------单选组开始----------------------//
            var radiogroup = new Ext.form.RadioGroup({
                fieldLabel: '性别',
                width: 100,
                items: [{
                    name: 'sex',
                    inputValue: '0',
                    boxLabel: '男',
                    checked: true
                }, {
                    name: 'sex',
                    inputValue: '1',
                    boxLabel: '女'
                }]
            });
            //获取单选组的值
            radiogroup.on('change', function (rdgroup, checked) {
                alert(checked.getRawValue());
            });
            //----------------------单选组结束----------------------//
            //----------------------复选组开始----------------------//
            var checkboxgroup = new Ext.form.CheckboxGroup({
                fieldLabel: '兴趣爱好',
                width: 170,
                items: [{
                    boxLabel: '看书',
                    inputValue: '0'
                }, {
                    boxLabel: '上网',
                    inputValue: '1'
                }, {
                    boxLabel: '听音乐',
                    inputValue: '2'
                }]
            });
            //获取复选组的值
            checkboxgroup.on('change', function (cbgroup, checked) {
                for (var i = 0; i < checked.length; i++) {
                    alert(checked[i].getRawValue());
                }
            });
            //----------------------复选组结束----------------------//
            //表单
            var form = new Ext.form.FormPanel({
                frame: true,
                title: '表单标题',
                style: 'margin:10px',
                html: '<div style="padding:10px">这里表单内容</div>',
                items: [txtusername, txtpassword, numberfield, hiddenfield, datefield, radiogroup, checkboxgroup],
                buttons: [btnsubmit, btnreset]
            });

三、说明

（1）var radiogroup = new Ext.form.RadioGroup():创建一个新的单选按钮组。

（2）name: 'sex'：单选按钮组是按照 name 属性来区分的，同一组中的单选按钮才能单选， 如果name属性设置错误，该按钮将会被认为是其他组。

（3）inputValue: '0'：选择框的值。

（4）boxLabel: '男':选择框后面的文字说明。

（5）checked.getRawValue()：获取选择框的选中值，由于单选框只有一个选中值，可以直接获取，而复选框可以多选，所以要循环取出。

四、多选框

1、选中的对象
	var selectedRows = obj.getSelectionModel().getSelections();