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

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

我在ExtJs 2.3中遇到了以下问题:
我想在一个组合框中进行搜索。我给予你一个例子:

  1. Ext.comboData.names = [['Peter', 'Paul', 'Amanda']];
  2. var store = new Ext.data.SimpleStore({
  3. fields: ['name'],
  4. data: Ext.comboData.names
  5. });
  6. var combo = new Ext.form.ComboBox({
  7. name: '...',
  8. id: '...',
  9. store: store,
  10. displayField: 'name',
  11. typeAhead: true,
  12. mode: 'local',
  13. forceSelection: false,
  14. triggerAction: 'all',
  15. emptyText: '-',
  16. selectOnFocus: true,
  17. applyTo: '...',
  18. hiddenName: '...',
  19. valueField: 'name'
  20. enableKeyEvents: true,
  21. lastQuery: '',
  22. listeners: {
  23. 'keyup': function() {
  24. this.store.filter('name', this.getRawValue(), true, false);
  25. }
  26. }
  27. });

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

x0fgdtte

x0fgdtte1#

anyMatch: true是您所需要的全部。(就像在SQL中... LIKE '%a %')您只需添加以下内容即可完成您要求的操作。

范例:

  1. Ext.create('Ext.form.ComboBox', {
  2. name: 'name',
  3. anyMatch: true,
  4. allowBlank: true,
  5. editable : true,
  6. typeAhead: true,
  7. transform: 'stateSelect',
  8. forceSelection: true,
  9. queryMode: 'local',
  10. displayField: 'name',
  11. valueField: 'id',
  12. selectOnFocus: true,
  13. triggerAction: 'all',
  14. store: {
  15. fields: ['id', 'name'],
  16. proxy: {
  17. type: 'ajax',
  18. url: '/user'
  19. },
  20. autoLoad: true,
  21. autoSync: true
  22. }
  23. })
展开查看全部
toe95027

toe950272#

我知道这是一个老问题,但这里最好的答案是建议覆盖doQuery。应该避免覆盖私有方法,特别是在您打算升级的时候。相反,只需添加一个beforequery侦听器,以防止doQuery清除过滤器。

  1. listeners: {
  2. 'keyup': function() {
  3. this.store.filter('name', this.getRawValue(), true, false);
  4. },
  5. 'beforequery': function(queryEvent) {
  6. queryEvent.combo.onLoad();
  7. // prevent doQuery from firing and clearing out my filter.
  8. return false;
  9. }
  10. }
wlsrxk51

wlsrxk513#

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

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

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

9fkzdhlc

9fkzdhlc4#

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

hwamh0ep

hwamh0ep5#

只需删除列表器并覆盖doQuery方法,如下所示

  1. if(combo!=null){
  2. combo.doQuery = function(q, forceAll){
  3. q = Ext.isEmpty(q) ? '' : q;
  4. var qe = {
  5. query: q,
  6. forceAll: forceAll,
  7. combo: this,
  8. cancel:false
  9. };
  10. if(this.fireEvent('beforequery', qe)===false || qe.cancel){
  11. return false;
  12. }
  13. q = qe.query;
  14. forceAll = qe.forceAll;
  15. if(forceAll === true || (q.length >= this.minChars)){
  16. if(this.lastQuery !== q){
  17. this.lastQuery = q;
  18. if(this.mode == 'local'){
  19. this.selectedIndex = -1;
  20. if(forceAll){
  21. this.store.clearFilter();
  22. }else{
  23. this.store.filter(this.displayField, q, true,false); // supply the anyMatch option
  24. }
  25. this.onLoad();
  26. }else{
  27. this.store.baseParams[this.queryParam] = q;
  28. this.store.load({
  29. params: this.getParams(q)
  30. });
  31. this.expand();
  32. }
  33. }else{
  34. this.selectedIndex = -1;
  35. this.onLoad();
  36. }
  37. }
  38. };
  39. }
展开查看全部
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提供一个侦听器并捕获此事件:

  1. change: function() {
  2. //debugger
  3. var store = this.getStore();
  4. store.clearFilter();
  5. store.filter({
  6. property: 'deviceName',//your property
  7. anyMatch: true,
  8. value : this.getValue()
  9. });
  10. }
7ivaypg9

7ivaypg99#

你可以使用keyup事件。我没有得到它的工作与此.getValue()。不得不使用此.getRawValue()

  1. keyup: {fn:function() {
  2. var store1 = ContractStore;//store object
  3. store1.clearFilter();
  4. store1.filter({
  5. property: 'modificationnumber',//your displayField
  6. anyMatch: true,
  7. value : this.getRawValue(),
  8. exactMatch: false,
  9. caseSensitive: false
  10. });

相关问题