Ext复选框checkboxgroup的使用（含数据回填）

工作中的案例，包含两种场景，看下效果图
新增：

修改（数据回填）：
代码如下：

{//最外层是form布局
	columnWidth: 1,
	xtype: 'form',
	style: 'background: #fff;',
	layout: 'column',
	defaults: {//设置items中的默认项
		columnWidth: 1,
		margin: '10 0 0',
		labelAlign: 'right',
		labelSeparator: '：'
	},
	items: [
		....
		{
			xtype:'checkboxgroup',
			beforeLabelTextTpl: new Ext.XTemplate(
				'<span style="color: red;">* </span>'
			),
			fieldLabel:'请选择下列选项',
			labelWidth: 115,
			columns:1, //一行展示几列
			vertical:true,
			allowBlank:false,//是否允许为空
			name:'checkBox'
		}
	]
}

在initComponent中注册afterrender事件，重点逻辑在initData方法中：

initComponent: function () {
	var me = this;
	//可以在此处请求CheckBox选项数据,赋值到me.tempArr
	me.on('afterrender', me.initData);
	Ext.applyIf(me,{})
	me.callParent();
},
initData: function(){
	var me = this;
	//获取group，也可以这么获取：var checkgroup = me.down('form').getForm().findField('checkBox');
	var checkgroup = me.down('checkboxgroup');
	// var tempArr = me.zspmArr;//如果在initComponent中已经请求了数据，则使用这行
	var tempArr = [//这里模拟CheckBox选项数据
		{
			value: "101090101",
			name: "选项1",
			id: 0.07
		}, {
			value: "101090201",
			name: "长的选项1",
			id: 0.05
		}, {
			value: "101090301",
			name: "非常长的选项1",
			id: 0.01
		}
	]
	
	if(me.actions == 'add'){//新增修改标识
		me.setTitle('新增');
		// checkbox数据处理
		for(var i = 0; i < tempArr.length; i++){
			//遍历数据，创建选项
			var checkbox = new Ext.form.Checkbox({
				boxLabel:tempArr[i].name,
				name:'zspm',
				inputValue:tempArr[i].value
			})
			checkgroup.items.add(checkbox);//将选项追加到group中
		}
	}else{
		me.setTitle('修改');
		//已选数据回读
		var dd = ['101090101','101090201'];//假设dd为后端返回的已选数据
		var checkbox;
		var valueDm = []; //避免双重遍历时将已选的覆盖
		for(var i=0; i<tempArr.length; i++){
			for(var j = 0; j < dd.length; j++){
				if(tempArr[i].value == dd[j]){
					valueDm.push(tempArr[i].value);
					checkbox = new Ext.form.Checkbox({
						boxLabel:tempArr[i].name,
						name:'zspm',
						inputValue:tempArr[i].value,
						checked:true //设置选中状态
					})
				}else{
					if(valueDm.indexOf(tempArr[i].value) == -1){
						checkbox = new Ext.form.Checkbox({
							boxLabel:tempArr[i].name,
							name:'zspm',
							inputValue:tempArr[i].value,
							checked:false
						})
					}
				}
			}
			checkgroup.items.add(checkbox);
		}
	}
}

然后点“保存”时可以通过me.down('checkboxgroup').getChecked()获取选中的值；
这个markdown里的代码缩进真让人难受(╯﹏╰)
End.

来源：oschina

链接：https://my.oschina.net/lcfblogs/blog/3290356

标签

CheckboxGroup

RED

Markdown

xtemplate