Question

我在ExtJs 2.3中遇到以下问题/问题：

我想在组合框内进行搜索。我给你举个例子：

Ext.comboData.names = [['Peter', 'Paul', 'Amanda']];

var store = new Ext.data.SimpleStore({
     fields: ['name'],
     data: Ext.comboData.names
});


var combo = new Ext.form.ComboBox({
     name: '...',
     id: '...',
     store: store,
     displayField: 'name',
     typeAhead: true,
     mode: 'local',
     forceSelection: false,
     triggerAction: 'all',
     emptyText: '-',
     selectOnFocus: true,
     applyTo: '...',
     hiddenName: '...', 
     valueField: 'name'
     enableKeyEvents: true,
     lastQuery: '',
     listeners: {
         'keyup': function() {
               this.store.filter('name', this.getRawValue(), true, false);
         }
     }
});

当我输入'a'时，“下拉”中只应该有'Paul'和'Amanda'。换句话说，我正在寻找一种解决方案，不仅可以通过条目的第一个字母来过滤数据，还可以使用类似正则表达式（？）的东西（比如SQL ... LIKE'％a％'） ...我还需要我的comboBox类型的“onKeyDown”-event，以便在我添加的每个字母上过滤结果。我怎样才能做到这一点？有什么想法吗？

提前坦克：）

Schildi

PS：不幸的是我必须使用我当前版本的ExtJs（2.3），所以如果我的问题只是在以后的版本中找到解决方案，我将不得不寻找另一种方式......

Answer 1

我知道这是一个老问题，但这里最好的答案建议覆盖doQuery。应该避免覆盖私有方法，尤其是在您要升级的情况下。相反，只需添加beforequery侦听器即可阻止doQuery清除过滤器。

listeners: {
     'keyup': function() {
           this.store.filter('name', this.getRawValue(), true, false);
     },
     'beforequery': function(queryEvent) {
           queryEvent.combo.onLoad();
           // prevent doQuery from firing and clearing out my filter.
           return false; 
     }
 }

Answer 2

anyMatch: true就是你所需要的。（就像在SQL中...... LIKE'％a％'）你可以通过简单地添加它来完成。

示例：

Ext.create('Ext.form.ComboBox', { name: 'name', anyMatch: true, allowBlank: true, editable : true, typeAhead: true, transform: 'stateSelect', forceSelection: true, queryMode: 'local', displayField: 'name', valueField: 'id', selectOnFocus: true, triggerAction: 'all', store: { fields: ['id', 'name'], proxy: { type: 'ajax', url: '/user' }, autoLoad: true, autoSync: true } })

Answer 3

ExtJS ComboBox有一个keydown事件（以及keyup和keypress），您可以将其用于此目的。

ExtJS SimpleStore也有filter方法，可以满足您的目的。你可以像这样使用它（找到包含'a'字符的值）：

store.filter('name', 'a', true, true)

第一个参数是记录字段，第二个是要查找的字符串/ regexpt，第三个参数表示过滤器应匹配字段的任何部分（而不仅仅是值的开头），最后一个值确定案例 - 灵敏度。当然，如果你愿意的话，你可以把它关掉。

所有这些都适用于ExtJS 2.3.0。希望这会让你开始。

Answer 4

这可以通过覆盖组合框的doQuery方法来完成。

Answer 5

删除该lister并覆盖doQuery方法，如下所示

if(combo!=null){
    combo.doQuery = function(q, forceAll){
  q = Ext.isEmpty(q) ? '' : 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{
                  this.store.filter(this.displayField, q, true,false); // supply the anyMatch option
                  }
                  this.onLoad();
              }else{
                  this.store.baseParams[this.queryParam] = q;
                  this.store.load({
                      params: this.getParams(q)
                  });
                  this.expand();
              }
          }else{
              this.selectedIndex = -1;
              this.onLoad();
          }
      }
  };
}

Answer 6

我在ExtJs4中有类似的要求检查以下链接中的调整......它对我来说非常有用。

http://atechiediary.blogspot.in/2013/06/first-page-extjs-containslike-search-in.html

Answer 7

我以前碰过过类似的东西。我查看了doQeury function，它似乎是使用显示名称进行过滤，而没有在过滤器函数中设置anyMatch参数。在这种情况下，没有简单的解决方案，但要覆盖doQuery或创建新的用户扩展。幸运的是，可以找到一个here

我认为这可能适用于Ext 2.3，因为我们最近升级了，我似乎丢失了我的文档链接。但这就是我要做的事情。

Answer 8

您也可以使用此方法：提供一个组合框的监听器并抓住这个事件：

 change: function() {
                        //debugger
                        var store = this.getStore();
                        store.clearFilter();
                        store.filter({
                            property: 'deviceName',//your property
                            anyMatch: true,
                            value   : this.getValue()
                        });
                    }

Answer 9

您可以使用 keyup 事件。我没有让它与 this.getValue() 一起工作。必须使用 this.getRawValue()

keyup: {fn:function() {
                        var store1 = ContractStore;//store object
                        store1.clearFilter();
                        store1.filter({
                        property: 'modificationnumber',//your displayField
                        anyMatch: true,
                        value   : this.getRawValue(),
                        exactMatch: false,
                        caseSensitive: false
                    });

ExtJs：在ComboBox中搜索/过滤

9 个答案: