多选下拉框组件非常简单实用,物美价廉。
参见: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);
}
分享到:
相关推荐
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
js多选下拉框多选下拉框多选下拉框js多选下拉框多选下拉框多选下拉框
Extjs3 多选下拉框LovCombo,Extjs3 多选下拉框LovCombo
使用bootstrap实现多选下拉框
多个js实现的多选下拉框
带checkbox的多选下拉框 原地址: http://www.codeproject.com/KB/miscctrl/customcombos.aspx
extjs3.2 多选下拉框 复选下拉框
自定义的WinForm窗体的下拉框中可以多选
整个控件由四部分组成:一个文本框、两个图标(向下|向上)、一个隐藏的 DIV 、两个隐藏域。 控件支持主流浏览器 IE 7+,FF3.5+,Chrome 9+,Safari 5 等浏览器。但在 IE6中与 与浏览器自身的 select 冲突。
JS多选下拉框,实现多选。点击显示下拉。 <!-- function $(e){return document.getElementById(e) ;} $('btnSelect').onclick = function () { //§ó§ï?? $('status').innerHTML = $('status').innerHTML=...
java swing 多选下拉框 支持动态加载数据 (优化了网上的下拉框代码)
jquery 多选下拉框实例,每个option前面都有一个checkbox
jquery.multiselect.js多选下拉框选择代码
Extjs4 comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用。来源于网络,稍作修改。
asp.net Dropdownlist结合CheckBoxList多选下拉框
html多选下拉框 ,CheckBox的Select组件。可多选的下拉框。
基于layui框架的前端多选下拉框组件,项目中直接导入,复制demo源码就能使用,开发方便,样式美观
jquery实现的多选下拉框ehynds-jquery-ui-multiselect-widget-1.10-3.zip
jquery.multi-select.js是一款jQuery多选下拉框插件。该插件可以将select元素转换为带checkbox的多选下拉框,非常实用。
jq+css实现的select多选下拉框美化