Ext4中,CheckboxGroup复选框修改时自动带选择问题

 这几天在做项目中遇到复选框选择的业务,前台界面用的是Ext4,在做的过程中用到了复选框组件CheckboxGroup,

开发发现一个难点,就是多选框的新增时,保存到后台是编号[0, 2](我选择第一个和第三个打钩);但是在修改时赋值给复选框组就困难了,浏览器报错

内容是Uncaught TypeError: Cannot use 'in' operator to search for 'domain.xxxItem' in 0, 2

我的赋值操作是这样的

 

//获取到选择行记录

var record = gridView.getSelectionModel().getSelection()[0];

//循环
   for(p in record.data) {

//获取一列
    var memo = editForm.down('[name=domain.' + p + ']');
    //必须要判断为空,比如你显示在grid里面很多值,但是你修改的panel里面定义是控件又比grid少,这时就会有找不到异常了.
    if(memo != null){

//设置值
     memo.setValue(record.data[p]);  //关键
    }
   }
   editView.show();

 

这个是Ext认为是数组,在赋值时CheckboxGroup的setValue()方法不懂怎么给数组赋值.

原因是:Ext4没有给CheckboxGroup的setValue()方法做处理.怎么办,google一把,看到一个Ext的外国网站,说:

重写setValue()方法.好,外国人就是牛.必须滴学习.

原控件代码:

Ext.create('Ext.form.CheckboxGroup', {allowBlank : false,items : [{boxLabel:'名称A',name:'facilitatorBaseData.serviceItem',inputValue:'0'},{boxLabel:'名称B',name:'facilitatorBaseData.serviceItem',inputValue:'1'},{boxLabel:'名称C',name:'facilitatorBaseData.serviceItem',inputValue:'2'}],name : "facilitatorBaseData.serviceItem",columns : "3",fieldLabel : "复选框选择<font color=red>*</font>"
})

重写,网上有几种方式的重写,大家得试试,不可能都满足大家的要求,

我是这样的

Ext.override(Ext.form.CheckboxGroup,{

//这个方法得名可以随便写,但是我用了循环复制,统一是setValue方法名,所以方便使用,要不然方法名不一样还得判断是不是CheckboxGroup控件在用定义的方法名赋值			setValue:function(val){  //多个选项值以逗号分隔的
				val = ","+val+","
				this.items.each(function(item) { 
					if (val.indexOf(item.inputValue) > -1) { 
						item.setValue(true);
					} else {
						item.setValue(false);
					}
				});
			}
			,clearValue:function(){  // 清空所有值
				this.items.each(function(item) { 
					item.setValue(false);
				});
			}
		 });

在带上查询时grid的转换

//查询时复选框显示转换
		function serviceItemRenderer(v, m, rec, row, col) {
			var my_array = new Array('名称A','名称B','名称C');
			var str = '';
			if (v != null) {
				var ss = v.split(',');
				var l = ss.length;
				for(var i=0;i < l;i++){
					str += my_array[ss[i].trim()];
					if(l > (i+1)){
						str += '/';
					}
				}
			}else{
				str = '';
			}
			return str;
		}

上图: 做了点处理~