Question

If I have a store attached to an Ext.grid.GridPanel, and I return errors from the server, how can I pass information from the response to the user?

So, for example

Ext.define('BC.data.Model.DnsZoneFile', {
    extend: 'Ext.data.Model',
    fields: [
         { name :'dnsZoneFileId'},
         { name :'origin'},
         { name :'serialNumber', type: 'int', defaultValue: 2011122001},
         { name :'status', defaultValue: 'PENDING_UPLOAD'},
         { name :'clientId', type: 'int', defaultValue: 1},
         { name :'ttl', type: 'int', defaultValue: 120}
    ],
    idProperty: 'dnsZoneFileId',
    idgen: {
        type: 'sequential',
        seed: 1,
        prefix: 'New'
    },
    proxy: {
        type: 'ajax',
        api: {
            create : '/dns/zone-file/xhr-put',
            read   : '/dns/zone-file/xhr-get',
            update : '/dns/zone-file/xhr-post',
            destroy: '/dns/zone-file/xhr-delete'
        },
        reader: {
            type: 'json',
            root: 'zoneFiles',
            totalProperty: 'total'
        },
        writer: {
            type: 'json',
            allowSingle: false
        }
    }
});

How can I specify a callback to be handled if the API on /dns/zone-file/xhr-put returns an error of some sort?

Answer 1

Ext.data.proxy.Ajax only exposes one event called exception that is called for all operations; however, the event handler will receive the operation being performed that caused the exception. Therefore, you can look for the create operation in the exception event handler, as follows:

    // ...
    proxy: {
        type: 'ajax',
        api: {
            create : '/dns/zone-file/xhr-put',
            read   : '/dns/zone-file/xhr-get',
            update : '/dns/zone-file/xhr-post',
            destroy: '/dns/zone-file/xhr-delete'
        },
        reader: {
            type: 'json',
            root: 'zoneFiles',
            totalProperty: 'total'
        },
        writer: {
            type: 'json',
            allowSingle: false
        },
        // here is the event handler
        listeners: {
            exception: {
                fn: function (thisProxy, responseObj, operation, eventOpts) {
                    // do error handling for 'create' operation
                    if (operation.action === 'create') {
                        // your code here
                    }
                }
            }
        }
    },
    // ...

Read about Ext.data.proxy.Ajax to see how the proxy listeners option and exception event work, as well as Ext.data.Operation to see what is being passed as operation in the exception event handler.