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?

Solution 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.

Solution 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.

Comments

[Danny]

Thanks for the reply. Can you possibly provide some more context - the current call is within a controller function...I'm not sure how this would be implemented?

[dbrin]

same as your "success" block, just "callback" instead :)

[Danny]

Ah, I see, I will try this again

[Danny]

useful extra info, thanks. Can I ask if the way I am loading the store is correct? I am loading 3 stores in the controller, and this method appears to be an auto generated one. I am still familiarising myself with the syntax - to me, this.store.Categories.load() would seem more obvious, but is obviously not the case!

[sra]

@BrynJ Well I will update my post to provide some more information on callbacks & listeners.

[Danny]

Just noticed that I placed the braces incorrectly in my code too - I was quite certain I'd also tried callback as the property name for my handler...in that case hopefully this will work :)

[Danny]

Thanks for the further info. I will look at events moving forward.