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.

why not look at the examples on their website? they have this covered. — dbrin, Mar 17 '14 at 17:00
Okay I admit I did get a bit lazy here. Could this be done with `callback`? — Clay Banks, Mar 17 '14 at 17:12
If you're not sure what a function returns you can do a `console.log(arguments)` => it 'll log you the array of all the arguments, the order of the arguments was wrong. :) (or you could check the documentation ofcourse ;) ) — VDP, Mar 18 '14 at 08:32
Hey @VDP, have another! http://stackoverflow.com/questions/22481633/grid-not-displaying-all-records-ext-js — Clay Banks, Mar 18 '14 at 14:00

score 8 · Accepted Answer · edited Jun 05 '15 at 20:11

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) {
        // ...
    }
});

I had a few syntax errors on my `store.load({})` at first, I think it was the order of it's parameters, but now it works wonders. Thanks again @VDP! — Clay Banks, Mar 18 '14 at 12:57

Success and Failure functions in a store - Ext JS

1 Answers1

Linked