EXTJS4-----Checkbox控件使用

一、  定义

（Checkbox）多选控件，可以同时选项多个选顶。

 

二、  常用属性

属性名称	描述
checked：Boolean	初始化时设为true表示选中
boxLabel:String	控件标签的名称
inputValue:Object	提交表单时的值

 

三、  常用方法

方法名称	描述
getValue()	返回checkbox是否选中
setValue(Boolean/String checked)	设置true, 'true', '1', or 'on'为选中，其他值不选中.

 

四、  常用事件

事件名称	描述
change( Ext.form.field.Field this, Object newValue, Object oldValue, Object eOpts )	选择状态发生变化时
setValue()	设置值

 

五、  事例代码

        Ext.onReady(function () {
            Ext.create('Ext.window.Window', {
                title: 'Checkbox示例',
                bodyPadding: 10,
                height: 180,
                width: 300,
                plain: false,
                items: [{
                    xtype: 'fieldcontainer',
                    fieldLabel: '你最爱语言',
                    defaultType: 'checkboxfield',
                    labelWidth: 70,
                    labelAlign:'center',
                    items: [
                        {
                            boxLabel: 'C',
                            name: 'language',
                            inputValue: 'C',
                            id: 'c1'
                        }, {
                            boxLabel: 'C++',
                            name: 'language',
                            inputValue: '1',
                            id: 'c2'
                        }, {
                            boxLabel: 'C#',
                            name: 'language',
                            inputValue: 'C#',
                            checked: true,//默认选中
                            id: 'c3'
                        }, {
                            boxLabel: 'C/C++',
                            name: 'language',
                            inputValue: 'C/C++',
                            id: 'c4',
                            listeners: {
                                change: function (newValue, oldValue, eOpts)//change事件
                                {
                                    alert("状态发生变化了!");
                                }
                            }
                        }
                    ]
                }],
                buttonAlign: 'center',
                buttons: [{
                    text: '登录',
                    handler: function () {
                        var radio1 = Ext.getCmp('c1');//获取id为c1的checkbox
                        radio1.setValue(true);//把c1选中
                        alert(radio1.getValue());//获取c1的值
                    }
                }]
            }).show();