ExtJS表单之复选框CheckboxGroup展示与取值

版本一
复选框的值都是直接指定。

    Ext.onReady(function(){  
                var myCheckboxGroup = new Ext.form.CheckboxGroup({   
                    id:'myGroup',   
                    xtype: 'checkboxgroup',   
                    renderTo :'form-cb',  
                    fieldLabel: 'Single Column',   
                    itemCls: 'x-check-group-alt',   
                    columns: 3,   
                    items: [   
                        {boxLabel: '唱歌', name: '1'},   
                        {boxLabel: '游泳', name: '2', checked: true},   
                        {boxLabel: '看书', name: '3'},  
                        {boxLabel: '旅游', name: '4'},  
                        {boxLabel: '游戏', name: '5'},  
                        {boxLabel: '睡觉', name: '6'}   
                    ]   
                });   
                  
                //CheckboxGroup取值方法  
                for (var i = 0; i < myCheckboxGroup.items.length; i++)  
                {  
                    if (myCheckboxGroup.items.itemAt(i).checked)  
                    {  
                        alert(myCheckboxGroup.items.itemAt(i).name);                  
                    }  
                }  
            });  

	// 复选框
	var myCheckboxGroup = new Ext.form.CheckboxGroup({
		xtype: 'checkboxgroup',
		name: 'model_type',
		width: 80,  //宽度220
		columns: 1,  //在上面定义的宽度上展示3列
		fieldLabel: '机型类型cb',
		items: [
			{boxLabel: '存储机型', name: 'store'},
			{boxLabel: '均衡机型', name: 'average'},
			{boxLabel: '其他机型', name: 'other'}
		]
	});
	
	// 2，收集复选框的值
	var ids = [];
	var cbitems = myCheckboxGroup.items;  
	for (var i = 0; i < cbitems.length; i++) {  
		if (cbitems.itemAt(i).checked) {  
			ids.push(cbitems.itemAt(i).name);  
		}  
	}
	

版本二
复选框的值也可以动态指定

DoctorWorkStation_CommonDoctorAdvice.CreateYZCheckBoxWin = function(store, colnum,title) {  
    var count = store.getCount();  
    var myCheckboxItems = [];  
    for (var i = 0; i < count; i++) {  
        var boxLabel = store.getAt(i).get("name");  
        var name = store.getAt(i).get("id");  
        myCheckboxItems.push({  
                    boxLabel : boxLabel,  
                    name : name  
                });  
    }  
    var myCheckboxGroup = new Ext.form.CheckboxGroup({  
                xtype : 'checkboxgroup',  
                itemCls : 'x-check-group-alt',  
                columns : colnum,  
                items : myCheckboxItems  
            });  
    var form = new Ext.FormPanel({  
                border : true,  
                frame : true,  
                labelAlign : "right",  
                buttonAlign : 'right',  
                layout : 'column',  
                width : 500,  
                items : [myCheckboxGroup],  
                buttons : [{  
                    xtype : 'button',  
                    text : '确定',  
                    handler : function() {  
                        var ids = [];  
                        var cbitems = myCheckboxGroup.items;  
                        for (var i = 0; i < cbitems.length; i++) {  
                            if (cbitems.itemAt(i).checked) {  
                                ids.push(cbitems.itemAt(i).name);  
                            }  
                        }  
                        win.destroy();  
                        if (ids.length) {  
                            Ext.Msg.alert("消息", "选中状态的id组合字符串为:" 
                                            + ids.toString());  
                        }  
                    }  
 
                }, {  
                    xtype : 'button',  
                    text : '取消',  
                    handler : function() {  
                        win.destroy();  
                    }  
 
                }]  
 
            });  
    var win = new Ext.Window({  
                modal : true,  
                layout : 'fit',  
                title : title,  
                width : 500,  
                height : 300,  
                plain : true,  
                items : [form]  
            });  
    win.show();  

}

如果您觉得本文的内容对您的学习有所帮助，您可以微信：