Success and Failure functions in a store - Ext JS

Question

I have a request which, on success, loops through each attribute of a JSON response and adds it to my store:

var request = Ext.Ajax.request({
    url: 'MCApp',
    jsonData: searchquery,
    params: {
        start: 0,
        limit: itemsPerPage
    },
    success: function(response) {
        mainresponse = response.responseText;
        if (mainresponse.length == 0) {
            alert('No results returned');
            return;
        }
        var decoded = Ext.decode(mainresponse);
        for (var i = 0; i < decoded.elements.length; i++) { // loop over decoded data
            var element = decoded.elements[i].element;
            var model = {};
            for (var x = 0; x < element.attributes.length; x++) { // loop over attributes
                var attribute = element.attributes[x];
                model[attribute.attrname] = attribute.attrvalue; // mapping element names & attributes
            }
            newstore.add(model); // implicitly cast data as Model
            models[i] = model;
        }
        newstore.loadRawData(models);
    },
    failure: function() {
        alert('Search Failed: Could not reach the server')
    }
});

I have now recreated the requestabove within my store. What I need to do is add these same success and failure functions.

var store = Ext.create('Ext.data.Store', {
    storeId: 'resultsetstore',
    autoLoad: false,
    pageSize: itemsPerPage,
    fields: [
        { name: 'id',          type: 'auto' },
        { name: 'name',        type: 'auto' },
        { name: 'description', type: 'auto' }
    ],
    proxy: {
        type: 'ajaxwithpayload', //customized proxy to read "jsonData" 
        url: 'MCApp',
        jsonData: searchquery,
        reader: {
            type: 'json',
            root: 'elements'
        }
        success: { /* success functions */ },
        failure: { /* failure functions */ }
    }

});

Here's what my response looks like:

{
   "elements":[
      {
         "element":{
            "name":"Element Name", 
            "id":"Element ID",
            "attributes":[
               {
                  "attrname":"id",
                  "attrvalue":"This is the ID"
               },
               {
                  "attrname":"name",
                  "attrvalue":"This is the name"
               },
               //etc.

1) Is there any way to recreate these functions on my store?

2) Is decoding my response this way the best way to load my response into my store?

EDIT

I'm using the callback function when I load the store:

store.load({
    params: { start: 0, limit: itemsPerPage },
    callback: function(options, success, response, records) {
        if (success) {
            alert(response.responseText);
        }           
    }
});

However, I'm getting an undefined in my alert, and it's telling me there are 0 records loaded. But when I look at my response in Firebug I see my JSON string returned just fine.

Answer 1

Error handling in stores

You can listen for the exception-event on the proxy to capture all the store errors. And for success on the store load-event

var store = Ext.create('Ext.data.Store', {
    storeId: 'resultsetstore',
    autoLoad: false,
    pageSize: itemsPerPage,
    fields: [
        { name: 'id',          type: 'auto' },
        { name: 'name',        type: 'auto' },
        { name: 'description', type: 'auto' }
    ],
    listeners: {
        load: function(store, records, successful, eOpts) {
            if (successfull) {
                alert('success');
            }
        }
    },
    proxy: {
        type: 'ajaxwithpayload', //customized proxy to read "jsonData" 
        url: 'MCApp',
        jsonData: searchquery,
        reader: {
            type: 'json',
            root: 'elements'
        },
        listeners: {
            exception: function(proxy, response, operation, eOpts) {
                alert('exception');
            }
        }
    }
});

or in the load call itself:

store.load({
    callback: function(records, operation, success) {
        // ...
    }
});

or if you use sync (for saving removed, modified,...)

store.sync({
    callback: function(batch, options) {
        // ...
    },
    success: function(batch, options) {
        // ...
    },
    failure: function(batch, options) {
        // ...
    }
});