ExtJs 4: dealing with messages (and errors) from an Ajax or REST proxy

Posted on October 10, 2011 by Dae

When sending Ajax or REST requests, a proxy of ExtJs 4 typically expects a response with the following parameters: data, success and message. The message parameter is optional, but it may come in handy when you want to show the request results to the user.

That’s how I do it:

function requestMessageProcessor(proxy, response) {
	if (response && proxy) {			
		try {						
			var responseData = proxy.reader.getResponseData(response);
			
			if (responseData.message) {
				var messageDescription = 'Information'; // title of the alert box
				var messageIcon = Ext.MessageBox.INFO;
				
				if (!responseData.success)
				{
					var messageDescription = 'Error';
					var messageIcon = Ext.MessageBox.ERROR;
				}
				
				Ext.MessageBox.show({
					title: messageDescription,
					msg: responseData.message,
					buttons: Ext.MessageBox.OK,
					icon: messageIcon
				});
			}
		}
		catch(err) {
			// Malformed response most likely
			console.log(err);
		}
	}
}

And here’s the part which should reside in proxy:

proxy: {
	...
	listeners: { 
		exception: function(proxy, response, options) {
			requestMessageProcessor(proxy, response);
		}
	},
	afterRequest: function(request, success) {
		requestMessageProcessor(request.scope, request.operation.response);
	}
}

It looks tricky because I didn't find a way to fetch the response message in afterRequest when the response is unsuccessful (success = false), so I had to add an exception listener.

Note that proxy itself may reside in either Model or Store. The code should work either way.

Also don't forget to add 'Ext.window.MessageBox' to Ext.require if you haven't.

If you know a better solution, or you know how this can be re-written, please comment!

This entry was posted in Programming and tagged , . Bookmark the permalink.

7 Responses to ExtJs 4: dealing with messages (and errors) from an Ajax or REST proxy

  1. h3x says:
    October 18, 2011 at 14:15

    I couldn’t find a better solution for this problem. Maybe this will me fixed in 4.10 but for now this fix work. I will share with you my approach :

    afterRequest:function(request,success){
	try {
		/*	ATENTION ---------------------------------------------------------------------------------------------------------------*
		 *	ExtJS 4.0.2a has a bug in the sync method, It does not have a success and failure handler to the response.				*
		 * 	To check the status of the transaction and send a message to the user, we need to set the aftherResquest method of		*
		 * 	the proxy to listen inside the response.																				*
		 * 	Following the standart way of responses, if success : false, the resquest object does not retrieve the response data	*
		 *	Because of that, was the need to create another method in the server to send the data. The field that have the real		*
		 *  status of the transaction is :																							*
		 *  boolean "transactionStatus", (could be TRUE or FALSE).																	*
		 *	------------------------------------------------------------------------------------------------------------------------*/
		var responseMsg = this.reader.getResponseData(request.operation.response).msg;
		if (this.reader.getResponseData(request.operation.response).transactionStatus) {
			Ext.Msg.alert('HEADER:', responseMsg?responseMsg:'SUCCESS');
			/*
			 * DO SOME COOL STUFF HERE
			 */
		}
		else{
			
			Ext.Msg.alert('HEADER:', responseMsg?responseMsg:'FALSE');
		}
	}
	catch(err) {
		Ext.Msg.alert('HEADER:', "UNEXPECTED ERROR"+ err);
	}
}
    Reply
  2. Sara says:
    October 14, 2012 at 11:14

    Amazing! Thank you for sharing this.

    Reply
  3. JJ says:
    November 22, 2012 at 09:30

    Thank you for posting this useful code.
    On exception, how do I reject changes made on the store?
    The grid using my store deleting row even though the store’s proxy fired exception.
    So, using your code I can handle event and alerting user with a message but can not update UI (grid).
    Thanks!

    Reply
    • Dae says:
      November 23, 2012 at 13:24

      As far as I remember ExtJs doesn’t apply changes if server sends a response which says success = false. Sorry if this is irrelevant, I haven’t worked with ExtJs for a long time.

      Reply

  4. Pingback: Ext error window

  5. Pingback: Ext error message

Leave a Reply

Your email address will not be published. Required fields are marked *