PDA

View Full Version : Completely Lost on Store/Proxy Exception Handling (ExtJS 4.2.1)



Xorcist
22 Jun 2013, 8:31 AM
So I have a model, bound to a store, bound to a grid.

The store is as follows:


Ext.define('appName.store.clients.Clients', {
extend: 'Ext.data.Store',
alias: 'store.clients',
model: 'appName.model.clients.Client',
proxy: {
type: 'ajax',
url: './data/clients/Clients.asmx/loadClients',
headers: { 'Content-type': 'application/json' },
reader: {
type: 'json',
root: 'data'
}
}
});


Now when my proxy runs and everything is okay I return:


{ 'succcess':true, 'message':'', 'data':[% lots of data goes here %] }

but when an issue happens on the server side I return:


{ 'succcess':false, 'message':'% server side error message here %', 'data':[] }

I have been all over the forums, googled this to death, but still haven't found an answer. How the heck can I show the user the error message? I'm sure there is a listener for this, but I can't seem to determine what it is (I tried using load, which let me test for success, but I couldn't figure out how to get to my message). With a straight ajax request this is easy, success or failure and I always have access to the response... but for some reason the proxy is just throwing me for a loop.

P.S. This is my first time trying to use a full MVC architecture, and I'm a bit new to ExtJS to boot, so any help would be greatly appreciated.

Tim Toady
23 Jun 2013, 6:18 PM
You can get the response data back from the rawData property on the reader IIRC.

Xorcist
24 Jun 2013, 5:18 AM
Like I said, I'm a bit new to ExtJS. Where would I access this from? Would I still use a listener on the load event?

tvanzoelen
24 Jun 2013, 5:26 AM
listen to the onLoad event of the store.


store.on('load', function(store, records, successful, eOpts){

if(!successful){
//handling here
}

});

or define the listener directly into your store class

Xorcist
24 Jun 2013, 7:52 AM
Well I am definitely able to check successful in load, but when I try to access store.proxy.reader.rawData it comes up as undefined. So attempts to get my error message from the returned JSON won't work.

I find it surprising that a concept so simple is proving to be extremely difficult to implement. Is there maybe another way to approach this? What I if don't return any JSON and just let the page throw a 500. Is there some way for me to out the details of the exception to the user then?

UPDATE:

So I kinda worked around this issue. Not 100% sure if this is considered "best practices", but basically what I did was create a global exception handler, and then forced my html status code to be 500 (even though the normal code would have been 200) so I could get into the handler and display my custom error messages. Something like this:



Ext.Ajax.on('requestexception', function (conn, response, options) {
var data = Ext.decode(response.responseText);
Ext.Msg.alert('Exception', data.message);
});

Tim Toady
24 Jun 2013, 9:23 AM
Here is an example from the writer example of how to handle
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/writer/writer-jsonp.html
(http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/writer/writer-jsonp.html)
Also... it should be in rawData. Make sure you have you are actually getting your reader



var store = Ext.create('Ext.data.Store', {
model: 'Writer.Person',
autoLoad: true,
autoSync: true,
proxy: {
type: 'ajax',
api: {
read: 'app.php/users/view',
create: 'app.php/users/create',
update: 'app.php/users/update',
destroy: 'app.php/users/destroy'
},
reader: {
type: 'json',
successProperty: 'success',
root: 'data',
messageProperty: 'message'
},
writer: {
type: 'json',
writeAllFields: false,
root: 'data'
},
listeners: {
exception: function (proxy, response, operation) {
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
},
listeners: {
write: function (proxy, operation) {
if (operation.action == 'destroy') {
main.child('#form').setActiveRecord(null);
}
Ext.example.msg(operation.action, operation.resultSet.message);
}
}
});

That said. A global solution for messages may be useful so you don't repeat yourself.

Tim Toady
24 Jun 2013, 9:45 AM
BTW, you don't have to force an exception. You can also use requestcomplete and look at something like success:false for your scenario. Reserve requestexception for true exceptions.