Chinaunix首页 | 论坛 | 博客
  • 博客访问: 26737
  • 博文数量: 12
  • 博客积分: 170
  • 博客等级: 入伍新兵
  • 技术积分: 120
  • 用 户 组: 普通用户
  • 注册时间: 2010-11-21 19:12
文章分类

分类: JavaScript

2014-09-08 17:34:01

    Ext的下拉列表Combox控件要绑定两个数据字段,一个是存储的值value,一个是显示的文本text。操作时既可以用鼠标下拉选择,也可以在下拉框中输入字符串,控件会在文本中把匹配的项过滤显示出来,这个功能在列表项较多时非常方便实用,这在多数情况满足使用要求。
    如果要用除显示文本以外的数据过滤列表项(常见的是汉字拼音简码),现有的Ext下拉列表控件需要扩展,下面就来实现这样的功能。
    通过阅读源码发现,对列表项的动态过滤是在doQuery函数中实现的,其核心代码如下:

点击(此处)折叠或打开

  1. if(this.mode == 'local'){
  2.     this.selectedIndex = -1;
  3.     if(forceAll){
  4.         this.store.clearFilter();
  5.     }else{
  6.         this.store.filter(this.displayField, q);
  7.     }
  8.     this.onLoad();
  9. }
    我们需要先增加一个过滤或者叫查询配置项,命名为keyField,然后重载doQuery函数即可。以下的实现保留原有的按文本过滤的功能,定义了查询字段时按查询字段过滤,未定义时仍按显示字段过滤。

点击(此处)折叠或打开

  1. Ext.form.ComboBox.prototype.doQuery =function(q, forceAll){
  2.     if(q === undefined || q === null){
  3.         q = '';
  4.     }
  5.     var qe = {
  6.         query: q,
  7.         forceAll: forceAll,
  8.         combo: this,
  9.         cancel:false
  10.     };
  11.     if(this.fireEvent('beforequery', qe)===false || qe.cancel){
  12.         return false;
  13.     }
  14.     q = qe.query;
  15.     forceAll = qe.forceAll;
  16.     if(forceAll === true || (q.length >= this.minChars)){
  17.         if(this.lastQuery !== q){
  18.             this.lastQuery = q;
  19.             if(this.mode == 'local'){
  20.                 this.selectedIndex = -1;
  21.                 if(forceAll){
  22.                     this.store.clearFilter();
  23.                 }else{
  24.                     if(this.keyField){
  25.                         this.store.filter(this.keyField, q, true);
  26.                         if(this.store.getCount()==0)
  27.                             this.store.filter(this.displayField, q, true);
  28.                     }else{
  29.                         this.store.filter(this.displayField, q, true);
  30.                     }
  31.                 }
  32.                 this.onLoad();
  33.             }else{
  34.                 this.store.baseParams[this.queryParam] = q;
  35.                 this.store.load({
  36.                     params: this.getParams(q)
  37.                 });
  38.                 this.expand();
  39.             }
  40.         }else{
  41.             this.selectedIndex = -1;
  42.             this.onLoad();
  43.         }
  44.     }
  45. };

阅读(911) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~