ExtJs:在ComboBox中搜索/过滤

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'时,只有'保罗'和'阿曼达'在"下拉列表"中.换句话说,我正在寻找一种解决方案,不仅可以通过条目的第一个字母来过滤数据,还可以使用类似正则表达式(？)的东西(就像在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事件（and keyup、and keypress），您可以将其用于此目的。

ExtJS SimpleStore还有一个filter适合您目的的方法。您可以像这样使用它（查找包含“a”字符的值）：

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

第一个参数是记录字段，第二个参数是要查找的字符串/正则表达式，第三个参数意味着过滤器应该匹配字段的任何部分（而不仅仅是值的开头），最后一个值确定区分大小写。当然，如果您愿意，您可以将其关闭。

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