ExtJs:在组合框中搜索/筛选

ao218c7q  于 2022-11-04  发布在  其他
关注(0)|答案(9)|浏览(243)

我在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”和“阿曼达”。因此,换句话说,我正在寻找一种解决方案,不仅根据条目的第一个字母,但也许通过使用正则表达式(?)(就像在SQL中一样...像'%a %')...我还需要为我的comboBox输入“onKeyDown”事件类型,以便过滤我添加的每个字母的结果。我该怎么做呢?有什么想法吗?
坦克提前很多:)
席尔迪
PS:不幸的是,我必须使用我当前版本的ExtJs(2.3),所以如果在以后的版本中有一个解决我的问题的方法,我将不得不寻找其他方法...

x0fgdtte

x0fgdtte1#

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
  }
})
toe95027

toe950272#

我知道这是一个老问题,但这里最好的答案是建议覆盖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; 
     }
 }
wlsrxk51

wlsrxk513#

ExtJS ComboBox有一个keydown事件(以及keyupkeypress),您可以将其用于此目的。
ExtJS SimpleStore也有一个filter方法,应该可以满足您的需要。您可以像这样使用它(查找包含'a'字符的值):

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

第一个参数是记录字段,第二个参数是要查找的字符串/regexpt,第三个参数意味着过滤器应该匹配字段的任何部分(而不仅仅是值的开头),最后一个参数决定了是否区分大小写。当然,如果你愿意,你可以关闭它。
所有这些都适用于ExtJS 2.3.0。希望这能帮助您入门。

9fkzdhlc

9fkzdhlc4#

这可以通过覆盖combobox的doQuery方法来完成。

hwamh0ep

hwamh0ep5#

只需删除列表器并覆盖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();
          }
      }
  };
}
icomxhvb

icomxhvb6#

我在ExtJs4中有一个类似的要求,请检查下面链接中的调整...它对我来说非常有效。
http://atechiediary.blogspot.in/2013/06/first-page-extjs-containslike-search-in.html

gg58donl

gg58donl7#

我以前遇到过类似的情况。我研究了doQeury函数,它似乎是使用显示名称进行过滤,而没有在filter函数中设置anyMatch参数。在这种情况下,没有简单的解决方案,只能覆盖doQuery或创建一个新的用户扩展。幸运的是,可以在这里找到一个
我想这可能适用于Ext2.3,因为我们最近升级了,我似乎失去了我的文档链接。但这就是我将如何去做。

xuo3flqw

xuo3flqw8#

您也可以使用此方法:为combobox提供一个侦听器并捕获此事件:

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

7ivaypg99#

你可以使用keyup事件。我没有得到它的工作与此.getValue()。不得不使用此.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
                    });

相关问题