Extjs store load success handler not getting fired

Question

I have a store load method which returns data via an ajax request. I can see that the data is being returned using Firebug, but my success handler is not getting called:

    this.getCategoriesStore().load({params:{'id':d.data.category_id}}, {
        success: function(category) {
            console.log("Category: " + category.get('name'));
        },
        error: function(e) {
            console.log(e);
        }
    });

I am returning a success parameter, along with the data:

{"success":true,"categories":{"id":5,"name":"Frying","section_id":2}}

Is there something missing or am I doing anything wrong?

Answer 1

Well I suppose you are looking for this:

store.load({
    params:{'id':d.data.category_id},
    scope: this,
    callback: function(records, operation, success) {
        if (success) {
            console.log("Category: " + category.get('name'));
        } else {
            console.log('error');
        }
    }
});

It is not that obvious in the API that your additional params can be placed there too. But ExtJS often uses the config objects to wrap things up.

Edit to answer comment:

The short answer is: Yes

Now the longer version: In case of the store it is up to you to directly provide anonymous (or concrete) callbacks or register events. Both will work the same in your situation here.

But you can only have one callback while you can have many events. In further scenarios you will find situations where events fits much better or where events are the only way at all. That will always be the case when you are listening. Here are some notes on that:

• make use of the { single: true } property when you just need a callback once. Example: store.on('load', function(s) { /* do something*/ }, scope, { single: true }) The listener will be removed after it was called. This is needed cause of the use of a anonymous function, that cannot be removed.
• make use of mon() in most cases where you bind listeners directly in class-definitions to ensure the listeners get destroyed along with the instance of the class.

Both will save you browser memory.

Answer 2

Try this:

store.load({
    scope: this,
    callback: function(records, operation, success) {
        // the operation object
        // contains all of the details of the load operation
        console.log(records);
    }
});

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-load according to the docs there is no success and error callback.

Another alternative to providing callback you can also add a "load" event listener on the store for the same effect.