ExtJs stores and baseParams

I have found myself using ExtJS on both of the last two contracts I have worked on.

I have found that the API documentation, however well organised, doesn’t suit me.
Finding examples that are  specifically what you need can be a difficult task as they tend not to exist in the documentation itself but are more often than not found fragmented in the forums, across several posts, or in the example pages within the ExtJS site.

I’m not sure if this is intentional and meant as a way of pushing the user to buy a support contract but it can be frustrating. As well as  this the extensiveness of the ExtJS library causes me to sometimes forget some of the more straightforward principles in Javascript and become more lazy, expecting things to ‘just work out of the box’.

An example of this occurred this afternoon…

I have a grid on a page and am setting the grid to have only 10 records displayed, paged at any one time.

I wrote some asp.net to facilitate the request and return some data as JSON which I called with the start and limit parameters, as described in the API documentation. Using a JsonStore bound to a grid with a pagingToolbar I could make subsequents requests to next and previous pages of data, sorted ascending or descending.

All good so far!

An additional requirement was for the data to have a filter applied by the way of a text box at the top of the grid.
I’m not using ExtJs for anything other than the grids on this project and am using jQuery as an adapter.
So I simply wanted to get the filter text from the grid and pass it in as an additional parameter as part of the requests made by the jsonStore.

I can treat any initial request to the data as an ‘empty filter’ so can have all requests passing all three parameters (start, limit and filter), no matter when the request occurs.

So all I needed to do was make sure that, for each subsequent load of the store, I was retrieving the value from the filter.

The problem I had was a confusion over what to send across in the params when using the store.load({…}) call and and how to set the baseParams on the store and when.

In hindsight, the way to achieve this seems obvious , but it wasn’t something that came to me naturally at first (because of the reasons I described above).

I found myself looking around at the pagingToolbar class in the API docs and trawling through the API for an example. I found it hard to believe that the forums didn’t have any specific examples of how this might be done, seeing as I’m sure many others have tried to do the same thing.

The solution was to set the base parameters before the request was made by adding a listener to the beforeload event on the datastore. I’m using jQuery to get the value of the text box with the id of txtFilter to do this:

//DATA STORE
    var myStore= new Ext.data.JsonStore({...});

    myStore.on('beforeload', function(store){
	store.baseParams = {limit: gridPageSize, filter: $('#txtFilter').val()};
    });

Nothing too complicated about it.  I just wish that this kind of example were more readily available (or at least linked to) from the ExtJs API documentation.

Lewis Barclay
Web Development, Architecture and Design

About these ads

Posted by lbarclay on March 19, 2009

http://lbarclay.wordpress.com/2009/03/19/extjs-stores-and-baseparams/