ExtJS 4 Local Combobox with Any Match Filter

This post is based on skirtle answer on Sencha Forum. The original thread can be found at http://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter.

ExtJS combobox comes with default filtering based on beginning of string, so if someone type a string into the combobox it will try to find remainder of the text being typed. This behavior is somewhat frustrating for me, as I need the combobox to be able to find substring located anywhere inside the string (like SQL of ‘%query%’ instead of ‘query%’).

If the combobox is configured with remote queryMode then it’s easy to change this behavior since I’ll just have to write correct query syntax, but I don’t want remote filtering because I want to limit network traffic. Thus I have to find one way or another to be able to filter the combobox locally.

After several hours digging into several Stack Overflow and Sencha Forum, I tried many solutions but all failed miserably:

  • Overriding anyMatch property of Ext.util.Filter
  • Listen ‘change’ event and filter the store manually using method filter
  • Change filters property of the store populating the combobox

As I was just about to give up and use remote filter, I found a solution posted in Sencha forum which works great. What I do is overriding doQuery function of the combobox.

Ext.define('fms.view.problem.ProbFormDefInc',{
  extend: 'Ext.form.Panel',
  alias: 'widget.probformdefinc',
  requires: [
    'Ext.form.Panel',
  ],
  padding: 10,
  border: 0,
  url: 'data/problem/problem.php',
  items: [{
    xtype: 'combo',
    name: 'cbsite',
    hiddenName: 'cbsite',
    store: 'ProbSites', //store defined in other file
    queryMode: 'local',
    forceSelection: true,
    allowBlank: true,
    fieldLabel: 'Site Name',
    width: 500,
    labelWidth: 125,
    displayField: 'SITE_NAME',
    valueField: 'SITE_ID',
    doQuery: function(queryString, forceAll) {
      this.expand();
      this.store.clearFilter(!forceAll);
      if (!forceAll) {
        this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
      }
    }
  }]
 });

In the future I’d really love to have this filtering mode as configurable option of combobox. But now, this solution works well, so, cheers!

One thought on “ExtJS 4 Local Combobox with Any Match Filter

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s