ExtJS 修复3.0里面的LovCombo(下拉多选框)的Bug

最新推荐文章于 2014-12-18 20:05:21 发布

最新推荐文章于 2014-12-18 20:05:21 发布 · 256 阅读

文章标签：

#EXT #prototype #IDEA #Blog

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文分析了一个LovCombo在ExtJS框架中出现的BUG，并提供了解决方案。BUG导致选中项丢失，通过重写beforeBlur方法及调整findRecord逻辑来解决。

如果你不知道lovcombo是什么,看http://setting.iteye.com/blog/340900

在3.0里面有个BUG,就是选中后,焦点离开的时候,combo的RawValue就没了...

于是分析了下,定位到以下代码:

//Ext.form.ComboBox源码
    // private
    beforeBlur : function(){
        var val = this.getRawValue();
        if(this.forceSelection){
            if(val.length > 0 && val != this.emptyText){
               this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : '';
                this.applyEmptyText();
            }else{
                this.clearValue();
            }
        }else{
           //关键问题所在
            var rec = this.findRecord(this.displayField, val);
            if(rec){
                val = rec.get(this.valueField || this.displayField);
            }
            this.setValue(val);


        }
    },

1.先来说说LovCombo的原理,

1)其实它就是在store里面加一个field,用来标记是否选中.(配置项 checkField:'checked')

2)value和rawValue都是通过逗号分隔的值(配置项 separator:',')

2.所以我们看上面的var rec=this.findRecor(this.displayField,val);肯定是得不到, rec为null,这时候value就被设置为val,也就是rawValue,但是如下代码,它的setValue判断的是value,所以自然为null

//Ext.ux.form.LovCombo.js
setValue:function(v) {
		if(v) {
			v = '' + v;
			if(this.valueField) {
				this.store.clearFilter();
				this.store.each(function(r) {
					var checked = !(!v.match(
						 '(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))
						+'(' + this.separator + '|$)'))
					;

					r.set(this.checkField, checked);
				}, this);
				this.value = this.getCheckedValue();
				this.setRawValue(this.getCheckedDisplay());
				if(this.hiddenField) {
					this.hiddenField.value = this.value;
				}
			}
			else {
				this.value = v;
				this.setRawValue(v);
				if(this.hiddenField) {
					this.hiddenField.value = v;
				}
			}
			if(this.el) {
				this.el.removeClass(this.emptyClass);
			}
		}
		else {
			this.clearValue();
		}
	}

3.修复的办法很简单,

1)重写beforeBlur

    var combo = new Ext.ux.form.LovCombo({
      width:600,
      hideOnSelect:false,
      maxHeight:200,
      store:new Ext.data.SimpleStore({
        id:0,
        fields:['pid', 'imageName']
      }),
      triggerAction:'all',
      valueField:'pid',
      displayField:'imageName',
      mode:'local',
      beforeBlur:function(){}




    });

2)重写findRecord返回多个record,然后在顶上那段粗体部分的代码,遍历record,拼成value,再set进去.

--这个就自己写吧,也不复杂~