Ext.ux.form.LovCombo多选下拉框的一个bug修正

多选下拉框组件非常简单实用，物美价廉。

参见：Ext扩展组件介绍之二--Ext.ux.form.LovCombo多选下拉框http://www.iteye.com/topic/340900

不过其有个bug，多个相同的显示值时，选一个，鼠标离开，显示所有的了：（

 

soaring 写道

这个东东是不错，不过有个BUG：如果下拉列表中有名字重复的选项，你在列表中选中一个的时候，它把所有的都选中了，之前用的是这样，不知最新版本的改了没有

 

一般来说，下拉框中的各个项的现实文字不应该重复， 重复了怎么区分呢？为什么名字一样值不一样呢？

 

不过有问题，咱就改。

 

看代码：------  Ext.ux.form.LovCombo.js  173行

,onRealBlur:function() {
		this.list.hide();
		var rv = this.getRawValue();
		var rva = rv.split(new RegExp(RegExp.escape(this.separator) + ' *'));
		var va = [];
		var snapshot = this.store.snapshot || this.store.data;

		// iterate through raw values and records and check/uncheck items
		Ext.each(rva, function(v) {
			snapshot.each(function(r) {
				if(v === r.get(this.displayField)) {
					va.push(r.get(this.valueField));
				}
			}, this);
		}, this);
		this.setValue(va.join(this.separator));
		this.store.clearFilter();
	} // eo function onRealBlur

 

确实是在鼠标离开以后，根据选中的各个显示值，去绑定的store中查找到对应的真实值的。

作者为什么要这样呢？ 个人猜原因可能是store中的数据是可变的，比如filter，或是手动的修改，增删。

为了防止数据不一致，所以又找了一遍。

其实选中和取消选择时，this.value存了所有了的真实值。一般来说，这个过程是多余的，一般我们用的combo是死的，数据变动我们换store，重新绑定即可。所以，简化上面的函数成两句：

 

onRealBlur:function() {  // by kimmking
		this.list.hide();
		this.setValue(this.value);
	} 

 就可以了，也没有了那个重复显示值自动全选的bug。

 

如果不想修改原来的文件Ext.ux.form.LovCombo.js，可以在文件引用的后面，加上对文件Ext.ux.form.LovCombo.fix.js的引用：

 

// Ext.ux.form.LovCombo.fix.js

Ext.ux.form.LovCombo.prototype.onRealBlur = function() {  // by kimmking
		this.list.hide();
		this.setValue(this.value);
	} 

 

 

 

评论

3 楼 sunchaohui_koko 2009-09-28  

选择多个鼠标离开，选择项目就消失了

2 楼 zenggang2008 2009-09-24  

是否能实现全选功能,当数据量大的时候挨个点还是不太方便

1 楼 会飞的狗 2009-05-08  

支持。给个下载地址。翻帖子不是很方便啊