Extjs combobox 多个选项的displayField相同时返回值不正确-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_2239/article/details/82638800

在使用ExtJS Combobox时遇到一个问题，当Combobox的选项中有多个相同的displayField，失去焦点后调用getValue()总是返回第一个valueField。问题根源在于beforeBlur事件中调用的assertValue方法。为解决此问题，可以通过覆盖该方法来修正。此问题在3.4版本之后已被官方修复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近碰到个combobox的问题，当combobox里面有多个相同的displayField,无论你选哪一个，只要组件失去焦点后，调用getValue()时总是返回第一个valueField,

通过debug源码，发现combobox的beforeBlur事件中调用了assertValue的方法，而问题就是出在这里，原因写在注释中：


 assertValue  : function(){
        var val = this.getRawValue(),
            rec = this.findRecord(this.displayField, val);

        if(!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(rec){

/*
因为前面this.findRecord(this.displayField, val)找到的是第一条符合条件的record(即第一条record),如果我们选择的选项不是第一条的话，下面的this.value == rec.get(this.valueField)就无法成立,代码将会用第一条record的value覆盖掉我们原来选择的value，所以导致只要失去焦点后再去getValue，就一直返回第一条记录的value的问题*/
                if (val == rec.get(this.displayField) && 
                       this.value == rec.get(this.valueField)){
                    return;
                }
                val = rec.get(this.valueField || this.displayField);
            }
            this.setValue(val);
        }
    }

解决方法也很简答，覆盖掉此方法即可
代码如下：


Ext.override(Ext.form.ComboBox, {
    assertValue: function () {
        var val = this.getRawValue(),
            rec = this.findRecord(this.displayField, val);

        if (!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 (rec) {
                //移除this.value == rec.get(this.valueField)
                if (val == rec.get(this.displayField)) {
                    return;
                }
                val = rec.get(this.valueField || this.displayField);
            }
            this.setValue(val);
        }
    }
});