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:

    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


25 thoughts on “ExtJs stores and baseParams

  1. So you needed an event listener?

    And shock! Horror! You had to read the API documentation to find the event you needed to hook into? Oh, the humanity!

    There are “examples” of adding event listeners EVERYWHERE.

    myObservable.on(“eventname”, function(){ doSomething();}

    Shall I hold your hand next time?

    1. JDeveloper, I completely understand your comment!

      You do confirm my points however; The ammount of assistance ExtJS gives me has helped me become lazy, there are examples EVERYWHERE not all of them are specific or described enough to answer a specific issue.

      The difference between baseParams and the params passed in when loading a store doesn’t seem so well documented though. Which is what led to the confusion and was assisted by my new found laziness.

      1. I think JDeveloper is quite arrogant. ExtJs do has quite a steep learning curve. Thank you for your post, it has been useful to me.

  2. Lewis, I appreciate you taking the time to share your findings. Your post helped me a great deal this morning with my malfunctioning Ext Store setup.

    I agree with you 100%: Coming from Java Development background, Ext API is downright barebones. It’s with the help of guys like you and that “Learning Ext” book that I was able to better grasp the Ext framework.

    And please ignore the ungrateful “JDeveloper.” He seems to have a fetish holding hands. To paraphrase Mr. Walt Kowalski, he’s probably some over-educated 27-year-old virgin who likes to hold the hands of superstitious old ladies and promise them an everlasting life.

    Good day!

  3. Your not the only one who thinks the ExtJS site is slightly a mess. It is hard to figure out what you need to use – you will basically HAVE to find the answer to your question on some other site. There are several different products that they offer too, and its confusing sometimes because they are talking about CORE and you are using GWT or something. Also, the info on their site is outdated – ExtJS has moved to 3 now but so much of the documenatation is for 1 or 2. Very annoying. The only good thing about ExtJS site is the API page – this is helpful to see which methods are available, but it wont answer any deeper questions you have or give any real examples that are worth anything. Also, the API page is a memory hog that ends up locking up your browser and computer after leaving it open too long 😦

  4. Hello Lewis – as Randy Jackson would say – “I’m a fan!”

    I’m a JS N00b, however there are no unsolved Oracle PL/SQL problems on my desk! As a linear thinker it has been double-tough wrapping my head around issues of timing, scope, “this” … never thought I’d have to leave “Server Mountain” and start designing/building UIs and JS components. Heck, I didn’t care much for learning PHP, but I’ve managed to get some code working.

    Your post is among the few I’ve read that helps frame the issue – a poorly written example here, a v1 or v2 example there, and some fairly snarky people (; along with a few snarky photos! 😉 and a trip to the ExtJS forum is like a trip to the dentist. I do not expect anything to work straight off, especially given some of the thread chatter I’ve read.

    Now I’m thinking about concepts of timing in a new dimension, and guess what? I can apply all my knowledge of Oracle trigger mutation theory and start to get a glimpse of what is needed to initialize or reference objects based upon timing and context or scope.

    Big thanks for a nudge in the right direction!

    Note to JDeveloper: professionalism is *always* in vogue – try some on sometime and see if it fits.

  5. I was struggling with this exact same issue tonight and found your posting. Thank you so much for pointing this out. It saved me a lot of time!!!

  6. Too… I was struggling with FILTER in Ext JS, but I thing “I’m a moron”. I need the last Punch ! je to newbie in ExtJS.

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

    filter : It is a Field in your mapping??

    Tnks in advance.

    Best REGARDS!!

    1. I hope you are not using jquery in Extjs, because the documentation was unclear. In my opinion takes this kind of programming you in a mess quickly. I would always solve this kind of issues native to the used framework. So I would use: Ext.fly or Ext.getCmp, rather than jquery. I would even include it into a temporary variable first, for this would make the source look more clear what the base parameter means. The way it is put here, doesn’t give you any clou.

      So something like:

      namefilter = Ext.getCmp(‘txtFilter’);
      myStore.on(‘beforeload’, function(store){
      store.baseParams = {limit: gridPageSize, filter: namefilter.getValue();};

      or: replace namefilter = Ext.getCmp(‘txtFilter’) with
      namefilter = Ext.getCmp(‘txtFilter’).getValue()
      and refer directly to namefilter in the baseParams.

      I hope I didn’t offend you by my statement.

  7. I totally agree with the author of this editorial. And the reaction of Jdeveloper is typically for the way I feel about Javascript nerds, they tend to think they own the holy grail. I come from the IBM Mainframe and AS/400 business and documentation is vital for having a product living a long life on the market. That is also including Extjs. There are some great people like Jesus Garcia doing a great job promoting Extjs, but I still feel that I lose a lot of time searching for something that could have been so simple. I think that we also could help each other a lot by showing a little bit more patience once in a while. We should not kill one another’s enthusiasm in creating better web applications. I don’t like to think that Javascript developers are just not so sympathetic. I liked your article.

  8. I agree with you guys. The extjs development is really cool, however their documentation is totally opposite, to be honest.

  9. Cool.

    Right now I’m stuck in a FormPanel – BaseParams issue (the parameters are not being included in the HTTP request!)

    I will keep researching and trying…

    While your problem/issue is different than mine, I liked the article. Keep up the good work.

  10. I agree with you 10000%, the 2nd paragraph sumarizes ExtJS to a T. Your example is perfect, I always find myself in the same situation whenever I use ExtJS, reason why I came up with my site, I was tired of not finding good examples and thought others might as well. Please check out my site if you have a chance, I have quite a few other examples on extjs.
    To sumarize extjs:
    “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.”

  11. Lots of others have already said this, but I totally agree with the author. It can be MADENNINGLY hard to make a small change to a seemingly appropriate example, but you just don’t know that one tiny thing you are doing wrong. And reading the API dcos and source RARELY helps me. I try it, but my answeres invariably comes from others, like JDeveloper.

    In fact, right now I am having an issue with reading XML where some fields are repeated and some are not. DOes the XMLReader know to make some data elements a string and some an array? I don’t know. I dont know what’s wrong but what I am doing should be trivial, I have read all teh examples I can find, and it still doesn’t work. I only get back the first one of any repeated field, no matter what I set “for” to in the tpl loop. If EXT JS didn’t consume days at a time on simple issues, it would be awesome.

  12. when i click PagingToolbar for next page ,but the params missing.
    i use the follow code ,
    store.on(‘beforeload’, function (store, options) {
    var new_params = { name: ‘3333’, intss: ‘111’ };
    Ext.apply(options.params, new_params);

    It work well the first time,but when click next page , that it seems that store.onload() method of the filter does not fire

  13. The author is correct, just go on extjs forum and spend more than 5 minutes looking for an answer and I guarantee you’ll find posts just like jdeveloper’s, rude and the least helpfull. If you can’t appreciate the fact someone has put time and effort into creating a site like this one, where people can actually find help and solution to their problem, then go trolling on extjs forum, you might feel more at home there.
    Thank you lbarclay for this site and the help it provides, it sure helps fill the void forums like extjs create.

  14. And here I thought it was me. Similar to Johan, I am on an IBM AS/400. ExtJS is a very good, but I can spend days trying to figure out how to process the refresh button on a PagingToolbar. Granted I’m a bit of a ExtJS noob, but even I can see that trying to gleen how the refresh button is handled simply by reading the API documentation is next to impossible.

  15. Since EXTJS 4 the proxy stores the baseParams (now called ‘extraParams’)

    store.on(‘beforeload’, function(store,options) {
    store.getProxy().extraParams = {param : ‘value’};
    }, this);


  16. I also like an approach which I believe was added in ExtJS 4.0 – when the user changes one of the filter fields, a change listener creates (or deletes) an instance of Ext.util.Filter and adds it to the Store with Ext.data.Store.addFilter(filter). Here’s what the basic code to add a filter looks like:

    var newFilter = new Ext.util.Filter({
    property: field.name,
    value : newVal

    Conversely, if the user removes a filter (ie: deletes the text from a filter textbox), I loop over the filters for that store, and remove the corresponding filter with store.removeFilter(filter).

    The nice thing about this approach is that if I call store.load() from more than one place in the code, these filters are already attached to the store, so I don’t need to re-apply them as params to the load() call each time. I can just call store.load(). I also like the fact that if an other piece of code needs to get a list of the filters applied to this store, they don’t have to know about the UI controls used to enter those filters, they just ask the store for its list of filters. That’s more semantically correct than querying UI controls for filter criteria.

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s