05 January 2011 ~ 14 Comments

ExtJs Grid filter

The following post describes how to filter an ExtJs Grid. If you are not familiar with how ExtJs gridpanels work, you should read the following post: ExtJs Grid.The example used is the same as in the ExtJs Grid post.

Let’s make short re-cap on the example:

var data = [
            ['Østfold',271662,2252,1960,292,7465,2148,5168,1053,2297,2589,274251],
            ['Akershus',536499,4979,2758,2221,22494,6354,17572,3181,4922,7143,543642],
            ['Oslo',586860,7795,3202,4593,34004,13434,28534,7453,5470,10063,596923],
            ['Hedmark',190709,1362,1625,-263,4892,1413,3873,488,1019,756,191465],
            ['Oppland',185216,1410,1489,-79,4895,1493,4110,488,785,706,185922],
            ['Buskerud',257673,2194,1703,491,8238,2791,6185,941,2053,2544,260217],
            ['Vestfold',231286,1846,1478,368,6719,2121,5175,951,1544,1912,233198],
            ['Telemark',168231,1355,1228,127,3773,1252,3037,422,736,863,169094],
            ['Aust-Agder',108499,1046,716,330,3267,965,2288,283,979,1309,109808],
            ['Vest-Agder',170377,1687,1046,641,4658,1586,3655,517,1003,1644,172021],
            ['Rogaland',427947,4954,2246,2708,11133,6235,7216,2152,3917,6625,434572],
            ['Hordaland',477175,4847,2800,2047,11732,5232,7880,1506,3852,5899,483074],
            ['Sogn og Fjordane',107080,937,698,239,2626,1196,2310,282,316,555,107635],
            ['Møre og Romsdal',251262,2164,1659,505,6001,2907,4434,820,1567,2072,253334],
            ['Sør-Trøndelag',290547,2997,1805,1192,9174,3013,7407,1542,1767,2959,293506],
            ['Nord-Trøndelag',131555,1126,972,154,3071,852,2938,459,133,287,131842],
            ['Nordland',236271,1934,1705,229,5262,1924,4709,528,553,782,237053],
            ['Troms Romsa',156494,1457,930,527,4627,1683,4260,642,367,894,157388],
            ['Finnmark Finnmárku',72856,652,514,138,2433,908,2225,311,208,346,73202]
        ];
        var store = new Ext.data.ArrayStore({
            fields: [
                { name: "state",                   type: "string"    },
                { name: "population_01_01_10",     type: "int"       },
                { name: "born",                    type: "int"       },
                { name: "dead",                    type: "int"       },
                { name: "born_sub_dead",           type: "int"       },
                { name: "moving_in_total",         type: "int"       },
                { name: "moving_in_foreigners",    type: "int"       },
                { name: "moving_out_total",        type: "int"       },
                { name: "moving_out_foreigners",   type: "int"       },
                { name: "neto_movin_in",           type: "int"       },
                { name: "population_growth",       type: "int"       },
                { name: "population_01_10_10",     type: "int"       }
            ],
            data: data
        });
        var grid = new Ext.grid.GridPanel({
            renderTo:Ext.getBody(),
            store: store,
            autoHeight: true,
            cm: new Ext.grid.ColumnModel({
                columns:[
                     { header: "State",                 dataIndex: "state" },
                     { header: "Population 01.01.10",   dataIndex: "population_01_01_10", sortable: true},
                     { header: "Population 01.10.10",   dataIndex: "population_01_10_10", sortable: true},
                     { header: "New born",              dataIndex: "born",                sortable: true, hidden: true}
                ]
            })
        });

The above should produce the following output:

ExtJs Grid filter magic has nothing to do with the grid!

When it comes to filtering the data in the grid it actually has nothing to do with the actual gridpanel used. It’s about applying filters to the store the grid depends on.

Let’s make a small adjustment to the above code and run a filter on the ArrayStore manually. On line 51 add:

store.filter("state", "Hordaland");

Now the store suddenly looks like this:

Let’s have a look at Sencha Inc documentation for the ArrayStore (any store actually) regarding the filter function:
Filter the records by a specified property. Alternatively, pass an array of filter options to filter by more than one property. Single filter example: store.filter(‘name’, ‘Ed’, true, true);

You can see a fully working example of ExtJs Grid filtering here: http://aboutfrontend.com/examples/extjs-grid-filter/

Further reading

Professional JavaScript Frameworks: Prototype,YUI, ExtJS, Dojo and MooTools
Beginning PHP RIA Using Extjs
Zend Studio for Eclipse Developer's Guide

14 Responses to “ExtJs Grid filter”

  1. luke 11 June 2011 at 23:09 Permalink

    Great Thread, thanks

  2. yoni 21 July 2011 at 08:40 Permalink

    thx, helpful

  3. Rafallo 30 August 2011 at 12:01 Permalink

    Do you know how can I set multiple filters using OR operator?

  4. maksimer 30 August 2011 at 12:08 Permalink

    @Rafallo My immediate answer would be to user Ext.data.Store.filterBy(). The function filterBy takes a funciton as a parameter and returns true for the records that passes the filter. Following is an example (untested):

    store.filterBy(function(rec, id)) {
        return (rec.get("state") == "Hordaland" || rec.get("state") == "Oslo");
    }
    

    Sounds good?

  5. Rafallo 30 August 2011 at 12:18 Permalink

    @Nils-Fredrik thank you for response.
    This way is good, but insufficient for large amount of data, because it’s filter data on client-side.

    I could do it in another way: filter data on server-side based on params given to Ext.data.Store.filter() method. But I tested it and does not work, because ExtJs still filter data on client-side, even when I did it on server-side.

    Any ideas?

  6. maksimer 30 August 2011 at 12:34 Permalink

    @Rafallo, what you need to do is to reload your store:

       var options = store.lastOptions;
       Ext.apply(options.params, {
          param1: "value",
          param2: "value2"
       });
       store.reload(options);
    

    On the serverside you will have to handle the OR statement. In other words, this has little to do with ExtJs and filtering. 🙂

  7. Humayun Javed 22 October 2013 at 13:12 Permalink

    Hi Could you please tell how can i apply filter on associated data in the Store. ? i am stuck at it. Please tell thanks

  8. Prasanta 10 June 2014 at 10:39 Permalink

    Hi,
    In My Application i have one grid.On that grid i have 2 field like reg_No,Branch.
    the Branch field contain the combo box.That combo box contain 4 value like IT,CSC,EEE,ECE. look the Grid details..

    REG_NO BRANCH
    101 IT
    102 CSE
    103 EEE

    like this,IT,CSE all are in combo box so when we want we can change the value also.
    my problem is when i use filter in the BRANCH for searching any data then that filter is not working in combo box.

    i need the solution please help me out

  9. Atul 13 June 2014 at 06:31 Permalink

    Hi Prasanta,

    use following config in your combo –

    typeAhead: true,
    mode: ‘local’

  10. Tish Stefano 27 June 2014 at 13:50 Permalink

    I must tell you that it’s hard to find your articles in google, i found this
    one on 16 spot, you should build some quality backlinks in order to
    rank your webiste, i know how to help you, just type in google – k2
    seo tips and tricks

  11. Elton 8 July 2014 at 04:53 Permalink

    I see a lot of interesting content on your blog.
    You have to spend a lot of time writing, i know how to save you a lot of time,
    there is a tool that creates unique, SEO friendly posts
    in couple of seconds, just search in google – laranita’s free content source

  12. Hermine 30 August 2014 at 02:46 Permalink

    I read a lot of interesting articles here. Probably you spend a lot of time
    writing, i know how to save you a lot of work, there is an online tool that creates high quality, google friendly articles in minutes, just search in google – laranitas free content source

  13. It is a fact that nidora is entirely new for the people but this product for weight loss before and after photos loss has been under observation and
    clinical test from last 20 years or even more time under the guideline of Dr.
    Currently, there is one anti-obesity substance on the market
    that’s accepted for long-term use. Remember, you should always eat nutritiously in order to have plenty of
    energy to fuel your exercises.

  14. best weight loss workout 11 March 2015 at 10:53 Permalink

    * Replace breads andd other starchy high carbohydrate foods with fruits and
    vegetables. The only way is a properly planned diet and daily exercise.
    How our mind adapts to failures will largely determine the condition of our
    inherite body.

    Revview my web-site; best weight loss workout


Leave a Reply