Friday, December 24, 2010

Additional Parameters in ExtJs data store

Hello again.

This is my second blog on ExtJs. Recently I was working on a project where my responsibility was to create Data filters of ExtJs grid. There will be number of drop downs in tool bar of grid and user can select values in one or more drop downs. Also paging is enabled in grid. So user can select some filters and according to that data will be displayed in grid in different pages with default page size 25.














So how to do that? Because here filters are dynamic. user may or may not select values in drop downs. After user selected some filters it should be retained in all the events like next page,first page, first page,last page and refresh.

Here I was working with ExtJs Json Store. When josn store gets loaded and assigned to grid, all its configuration will be used in all grid events like next page etc. We can pass additional parameters to json store while using load and reload method.

store.reload({params:{start:0, limit:20, sort:'col1',dir:'DESC',param1:value1,param2:value2}}).

But here in this case this function is automatically called by grid when we click on next and previous buttons. So we don't have control to add additional parameters and values in reload function. One possible solution is to override ExtJs pagaing toolbar and defining our own events. But its some what difficult for beginners. We have one easy solution for this. Json Store has one more property called baseParams. It takes an array of parameter name and values. All the parameters defined in baseParams will be sent to server in each paging event of grid. So in case of our dyanmic filters all we have to do is to change grid baseParama when user selects some values from drop down. This we can do it drop down select event as follow.

select:{
fn:function(combo,record,index) {
grid.store.baseParams = {param1:value1,param2:value2};
grid.store.reload();
}
}
All the parameters sent to server by json store and on server side you can use those parameters to get the data and send it back to the application.

That's it and you have a real time dynamic filtering in your grid.




3 comments:

  1. Great Work...
    Can You put some more code to explain.(where to put above code in store, etc.)

    ReplyDelete
  2. Above code should not be placed in store but it should be placed in events from where you want to reload store with extra parameters. Like as mentioned in is select event of combo selected combo value should be added to store parameters.So above code is placed in select event.

    ReplyDelete
  3. I have a problem. After clicking on refresh button in paging bar, the 'select' event send old value (previously selected) from combobox (it works fine before)

    ReplyDelete