ExtJS Combobox的多选扩写

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

 

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

Js代码 
//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);    
   
   
        }    
    },  
//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

Js代码 
//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();    
        }    
    }  
//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

Js代码 
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',    
  <STRONG>beforeBlur:function(){}</STRONG>    
   
   
   
   
});  
    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进去.

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

实例：http://wwww.qilecn.com:8088/f/ext+combobox+%E5%A4%9A%E9%80%89/Ext2.0%E4%B8%8B%E6%8B%89%E5%A4%9A%E9%80%89%E8%8F%9C%E5%8D%95%28MultiComboBox%29+-+EXT+-+web+-+JavaEye%E8%AE%BA%E5%9D%9B----d3d3LmphdmFleWUuY29tL3RvcGljLzIxNTk3Mg==.html

评论

1 楼 winerdaxian 2011-09-28  

很好的东西，谢了哦