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进去.

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

 

 

评论

5 楼 atian25 2010-11-04  

sssgon 写道

问下LZ，如果我想设置默认值该怎么设置呢？就是说一点击下拉的时候已经有默认选中的存在了

你setValue即可

4 楼 sssgon 2010-11-02  

问下LZ，如果我想设置默认值该怎么设置呢？就是说一点击下拉的时候已经有默认选中的存在了

3 楼 yangzelai 2010-06-03  

呃,错了,应该是:当选择一个下拉项后,lovCombo就把一切设置好了.所以在beforeBlur时,不必做任何值的检查.即写个空的就行了,当然如果不写一个function来覆盖它的话,默认就会继承这个function来执行了.

2 楼 yangzelai 2010-06-03  

把这个方法重写一个空的就行了.就是方法体内不写任何东西.
想写也可以,不过我认为没有必要,因为lovcombo的setValue方法里面又自动找了一道.

1 楼 fireinjava 2010-03-19  

天猪强啊按你的意思写的，顺便粘你这呵呵，改了beforeBlur

String.prototype.trim = function() {              
  return this.replace(/^\s+|\s+$/g, '');        
}

     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 texts = val.split(',');
        		var values='';
        		for(var i=0;i<texts.length;i++){
        				var rec = this.findRecord(this.displayField, texts[i].trim());
            		 if(rec){
            		 		values+=(values.length>0?',':'')+rec.data[this.valueField];
            		 	}
        			}
            this.setValue(values);
        }
    }