Ext的下拉列表Combox控件要绑定两个数据字段,一个是存储的值value,一个是显示的文本text。操作时既可以用鼠标下拉选择,也可以在下拉框中输入字符串,控件会在文本中把匹配的项过滤显示出来,这个功能在列表项较多时非常方便实用,这在多数情况满足使用要求。
如果要用除显示文本以外的数据过滤列表项(常见的是汉字拼音简码),现有的Ext下拉列表控件需要扩展,下面就来实现这样的功能。
通过阅读源码发现,对列表项的动态过滤是在doQuery函数中实现的,其核心代码如下:
-
if(this.mode == 'local'){
-
this.selectedIndex = -1;
-
if(forceAll){
-
this.store.clearFilter();
-
}else{
-
this.store.filter(this.displayField, q);
-
}
-
this.onLoad();
-
}
我们需要先增加一个过滤或者叫查询配置项,命名为keyField,然后重载doQuery函数即可。以下的实现保留原有的按文本过滤的功能,定义了查询字段时按查询字段过滤,未定义时仍按显示字段过滤。
-
Ext.form.ComboBox.prototype.doQuery =function(q, forceAll){
-
if(q === undefined || q === null){
-
q = '';
-
}
-
var qe = {
-
query: q,
-
forceAll: forceAll,
-
combo: this,
-
cancel:false
-
};
-
if(this.fireEvent('beforequery', qe)===false || qe.cancel){
-
return false;
-
}
-
q = qe.query;
-
forceAll = qe.forceAll;
-
if(forceAll === true || (q.length >= this.minChars)){
-
if(this.lastQuery !== q){
-
this.lastQuery = q;
-
if(this.mode == 'local'){
-
this.selectedIndex = -1;
-
if(forceAll){
-
this.store.clearFilter();
-
}else{
-
if(this.keyField){
-
this.store.filter(this.keyField, q, true);
-
if(this.store.getCount()==0)
-
this.store.filter(this.displayField, q, true);
-
}else{
-
this.store.filter(this.displayField, q, true);
-
}
-
}
-
this.onLoad();
-
}else{
-
this.store.baseParams[this.queryParam] = q;
-
this.store.load({
-
params: this.getParams(q)
-
});
-
this.expand();
-
}
-
}else{
-
this.selectedIndex = -1;
-
this.onLoad();
-
}
-
}
-
};
阅读(911) | 评论(0) | 转发(0) |