Skip to content

April 4, 2011

4

Selective column search using ExtJS Combo and SearchField together

by Joe Kuan

In ExtJS samples, there are couple showing how to use the SearchField class. However, I need the search to be more selective, ie the search is performed on specific or combination of column fields.

One way to achieve that is to have a SearchField accept specific query syntax for certain columns but this may not ideal for some users. Alternatively, I can create a Combo box next to the SearchField. The combo box offers users a selection of column fields or combination of fields. For the later approach, only a slight modification is needed in the search event handler.

Here is the code for onTrigger2Click method, the same one defined in Ext.ux.form.SearchField with couple extra lines for adding column field(s) parameter. The field_combo is the id of the combobox.

      var searchField = new Ext.ux.form.SearchField({
          width: 220,
          id: 'search_query',
          store: fieldNamesStore
      });
      searchField.onTrigger2Click = function(evt) {
        var text = this.getRawValue();
        if (text.length < 1) {
          this.onTrigger1Click();
          return;
        }

        // Get the value of search field
        var fid = Ext.getCmp('fields_combo').getValue();
        var o = { start: 0, fieldId: fid };

        this.store.baseParams = this.store.baseParams || {};
        this.store.baseParams[this.paramName] = text;
        this.store.reload({params:o});
        this.hasSearch = true;
        this.triggers[0].show();
      };
      tbar.push(searchField);

Here is the screenshot of the Combo and SearchField working together on column search.

4 Comments Post a comment
  1. fath
    Nov 28 2011

    dear joekuan, thanks a lot for your hack.

    i have a question on implementing your code. in my own grid js, i code as below:


    tbar: [
    '->','Search: ', ' ',
    new Ext.ux.form.SearchField({
    store: logactivity_store,
    width:200

    })
    ]

    how to modify into your hack? do i have to change the searchfield.js too? what should i change with fields_combo?

    thanks in advance.

    Reply
  2. Joe Kuan
    Nov 30 2011

    1. You need to add a combobox into your toolbar. The combobox should be created with a Store object with some constant value to indicate which field is selected. In my case, the combo, ‘field_combo’ is binded with an ArrayStore object with some pre-defined values.

    tbar: [ new Ext.field.Combobox{{
    id: ‘field_combo’,
    mode: ‘local,
    store: new Ext.data.ArrayStore({
    fields:[ ‘fieldId’, ‘fieldName’ ],
    data: [ [ 1, ‘First Field’ ], [ 2, ‘Second Field’ ] ]
    })
    }), ‘->’, ‘Search:

    2. Yes, you need to overwrite onTrigger2Click to retrieve the value from the combo mentioned above and put those value into the store’s baseParams. You can either create the object first, then overwrite the method by re-assigning the object’s method field which is in my example. In your example, you have to use Ext.override first.

    Reply
    • Mar 4 2012

      great code…But if you give us the override code or just put the whole example on a (demo) live site… will be great.
      In the meantime extjs version grow to 4.1, and the override is deprecated.
      Anyway, you did a great job, and your code save me in the past.. and I hope forward…

      Reply
      • Joe Kuan
        Mar 4 2012

        Thanks. I am planning to setup my own website with all the ExtJs 3 and 4 demos. Hopefully, that should help.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: