LovCombo是Ext的ux扩展中提供的下拉多选控件。当这个控件用在编辑表格EditorGridPanel上时,下拉选择多个选项后,会出现选中的数据丢失的问题。在网上查找了一下资料,没有找到解决方案,于是只好自己分析。问题解决过程中王亮 给予了大力支持,在此表示感谢!另作本文记录下这个问题的解决方法,与大家分享并备忘。
首先,说明一下问题的原因。LovCombo这个控件在Ext的示例中存在,并且是可用的,但是示例并没有将它放到EditorGridPanel上使 用,所以没有暴露问题。当这个控件放到EditorGridPanel上后,编辑完成焦点丢失,EditorGrid上的Editor会调用到一个叫做assertValue()的方法。这个方法是Ext的Combo 中 的,LovCombo继承自Combo但没有覆盖此方法。在这个方法的最后调用了this.setValue,将多选控件选中的选项以显示名称加逗号分割 的方式传入到了setValue中。而setValue无法识别这种逗号分割的显示值的字符串,它只支持以逗号分割的value字符串。经过运行后认为传 入的参数认为无法解读,便为控件设置了空值。所以选中的选项丢失了。
解决这个问题,可以有几种方案。个人选择了比较直接的一种。让LovCombo覆盖掉Combo中的 assertValue方法,不让其把逗号分割的显示值传入到setValue中,而传入给它逗号分割的value值。
修改 Ext的LovCombo类代码,在 里面加入下面的代码:
// 修正 : 当多选控件放到grid中时,grideditor会调用combobox中的这个方法。将选中的显示值传入到setvalue中,导致选择丢失。 ,assertValue : function(){ var val = this.getRawValue(), rec,arr_rec,i=0; // 分离value为数组,循环取rec var arr_val = val.split(this.separator); var arr_value = this.value.split(this.separator); for(;i<arr_val.length;i++){ if(this.valueField && Ext.isDefined(arr_value[i])){ rec = this.findRecord(this.valueField, arr_value[i]); } if(!rec || rec.get(this.displayField) != arr_val[i].trim()){ rec = this.findRecord(this.displayField, arr_val[i].trim()); } if(rec && !arr_rec){ arr_rec = []; } if(rec){ arr_rec.push(rec); } } if(!arr_rec && this.forceSelection){ if(val.length > 0 && val != this.emptyText){ this.el.dom.value = Ext.value(this.lastSelectionText, ''); this.applyEmptyText(); }else{ this.clearValue(); } }else{ if(arr_rec && this.valueField){ // onSelect may have already set the value and by doing so // set the display field properly. Let's not wipe out the // valueField here by just sending the displayField. if (this.value == val){ return; } i = 0; val = ""; var ival; for(;i<arr_rec.length;i++){ ival = arr_rec[i].get(this.valueField); if(!ival){ ival = arr_rec[i].get(this.displayField); } if(i ==0 ){ val = ival; }else{ val = val+","+ival; } } } this.setValue(val); } }
由于是多选,所以首先分离传入的value值字符串,然后分别找到他们的record,从中取value值拼接字符串,然后交给setValue.为了不引起其他影响,代码修改是尽量保持了combo中assertValue方法的 原有代码逻辑。
有了这段代码LovCombo就可以正常的在EditorGridPanel上使用了。
本文由作者本人转载到itEye,
原文 : http://www.oecp.cn/hi/slx/blog/1168441
提供该文档的机构为 OECP社区 ,更多的博客文章可以到 OECP社区 查看。该文档附件欢迎各位转载,在没有获得文章作者许可之前,不得对文章内容或者版权信息进行更改,版权归OECP社区 所有,仅此声明。