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

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

 

 

 

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

 

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

Js代码  

1. //Ext.form.ComboBox源码  
2.     // private  
3.     beforeBlur : function(){  
4.         var val = this.getRawValue();  
5.         if(this.forceSelection){  
6.             if(val.length > 0 && val != this.emptyText){  
7.                this.el.dom.value = Ext.isDefined(this.lastSelectionText) ? this.lastSelectionText : '';  
8.                 this.applyEmptyText();  
9.             }else{  
10.                 this.clearValue();  
11.             }  
12.         }else{  
13.            //关键问题所在  
14.             var rec = this.findRecord(this.displayField, val);  
15.             if(rec){  
16.                 val = rec.get(this.valueField || this.displayField);  
17.             }  
18.             this.setValue(val);  
19.   
20.   
21.         }  
22.     },  

 

 

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代码  

1. //Ext.ux.form.LovCombo.js  
2. setValue:function(v) {  
3.         if(v) {  
4.             v = '' + v;  
5.             if(this.valueField) {  
6.                 this.store.clearFilter();  
7.                 this.store.each(function(r) {  
8.                     var checked = !(!v.match(  
9.                          '(^|' + this.separator + ')' + RegExp.escape(r.get(this.valueField))  
10.                         +'(' + this.separator + '|$)'))  
11.                     ;  
12.   
13.                     r.set(this.checkField, checked);  
14.                 }, this);  
15.                 this.value = this.getCheckedValue();  
16.                 this.setRawValue(this.getCheckedDisplay());  
17.                 if(this.hiddenField) {  
18.                     this.hiddenField.value = this.value;  
19.                 }  
20.             }  
21.             else {  
22.                 this.value = v;  
23.                 this.setRawValue(v);  
24.                 if(this.hiddenField) {  
25.                     this.hiddenField.value = v;  
26.                 }  
27.             }  
28.             if(this.el) {  
29.                 this.el.removeClass(this.emptyClass);  
30.             }  
31.         }  
32.         else {  
33.             this.clearValue();  
34.         }  
35.     }  

 

3.修复的办法很简单,

1)重写beforeBlur

Js代码  

1. var combo = new Ext.ux.form.LovCombo({  
2.   width:600,  
3.   hideOnSelect:false,  
4.   maxHeight:200,  
5.   store:new Ext.data.SimpleStore({  
6.     id:0,  
7.     fields:['pid', 'imageName']  
8.   }),  
9.   triggerAction:'all',  
10.   valueField:'pid',  
11.   displayField:'imageName',  
12.   mode:'local',  
13.   <strong>beforeBlur:function(){}</strong>  
14.   
15.   
16.   
17.   
18. });  

 

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

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