ArtSoftSolutions

an article by Robert

ExtJS grids offer us a wide range of native features and possibilities. Filtering by values of some columns is one of them. Although unintuitive, this method has its limitations - it applies only to the values of the store - meaning our filtering criteria has to be a column in the grid.

An interesting problem appears when we try to apply an external filter over the grid's store. Say we have a users grid (first name, last name, id, level and domain) and we want to apply a filter from a combo-box by the level of the employee.

Of course, we could activate native ExtJS filtering, but this example wants to be an alternative the the default ExtJS filtering.

We found over the Internet several "solutions" but they all had the same issue: when changing the grid page, or refresh the grid (from grid bottom bar), the filtering was lost.

Example 1

myStore = new Ext.data.Store({
        url: 'feeds/market.php',
        baseParams: {marketid: '1', count: '30'},
        method: 'GET',
        reader: new Ext.data.XmlReader(
                {record: 'Item', id: 'id', totalRecords: '@total' }, 
                [{name: 'runner', mapping: 'ItemAttributes > runner'}, 'back', 'lay', 'graph']
        )
});

The proposed solution in this example was the following:

myStore.load({ params: {marketid: '20184780', count: '30'}});

The problem was that the parameters specified in baseParams will be sent with the same value at each request, only load obes are the ones that can change their value, each time we do a new load. But, when changing the page or refreshing the grid, filtering was lost.

Example 2

myStore = new Ext.data.Store({ 
        url: 'feeds/ladder.php',
        .....
});

We could have used setURL to call an URL - something like ladder.php?something=1&somthing=2, but this method didn't help either.

Example 3

Somehow related to first example, but without baseParams, this method didn't allow us keeping the external filter for the grid on other pages and/or refresh.

grid.store.load({params:{url: my_url}});

Example 4

Another example we found on the Internet was:

myStore.proxy.conn.url = '/new/url'; 
mystore.load(); //mystore.reload(); 

We couldn't accomplish what we wanted with this method, either.

The Solution

The saving solution was using the beforeLoad of the store:

myStore.on('beforeload', function(store){
        store.baseParams = {filter: myFilter};
});

And... Evrika! It Worked!

After some time, we discovered that this method used in an ExtJS grid that also used the SearchField extension, was losing the search criteria. The solution came out quite easily:

var vSearch = new Ext.ux.form.SearchField({
    store: anotherStore,
    width: 150
});

myStore.on('beforeload', function(store){
        mySearchPhrase = vSearch.getRawValue();
        store.baseParams = {filter: myFilter, query: mySearchPhrase};
});

A small trick that allowed us to integrate an external filter in the grid, without using native ExtJS filtering.