Ext LovCombo用在EditorGridPanel上时选择丢失问题的解决

        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社区 所有，仅此声明。