ExtJS 修復3.0裏面的LovCombo(下拉多選框)的Bug

如果你不知道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進去.

--這個就自己寫吧,也不復雜~