PDA

View Full Version : Exception Handling in Ajax Request



nil5286
11 Apr 2012, 8:04 AM
I am referring to the link below regarding custom Exeption Handling:

http://whatisextjs.com/extjs-4-tutorial/asp-net-mvc3-extjs4-errors#respond

Where on ajax request in failure function it calls custom exception handler function shown below:



// Intercepting from simple Ajax call
Ext.Ajax.request({
...
failure: function(response) {
handleAjaxError(response);
},
success: function(response) { ... }
}); // eo Ajax

// Custom error handler window
handleAjaxError = function ( ajaxResponse ) {
var responseData = Ext.JSON.decode(ajaxResponse.responseText),
win = null,
windowConfig = null;

if (!responseData) // request timed out?
{
responseData = {
ExceptionType: 'Timeout',
Message: 'It appears the request timed out, please try again!'
};
}

// Window to show
windowConfig = {
title: 'Error: ' + Ext.htmlEncode(responseData.ExceptionType),
layout: 'anchor',
defaults: { anchor: '100%' },
modal: true,
resizable: false,
width: 400,
items:
[
{
xtype: 'container'
, autoScroll: true
, html: '<img style="float: left; padding: 5px;" src="../extjs/resources/themes/images/gray/shared/icon-error.gif">'
+ Ext.htmlEncode(responseData.Message)
}
], // eo items
buttons:
[
{ text: 'OK', handler: function() { win.destroy(); } }
], // eo buttons
listeners: {
afterrender: { // make sure layout sized properly
single: true,
buffer: 10,
fn: function() { return; win.doLayout(); }
} // eo afterrender
} // eo listeners
};

// Stack trace panel on the bottom?
if ( responseData.StackTrace )
{
windowConfig.items.push({
xtype: 'panel',
title: 'Stack Trace',
collapsible: true,
collapsed: true,
titleCollapse: true,
layout: 'fit',
listeners: {
collapse: function() { win.doLayout(); },
expand: function() { win.doLayout(); }
},
items: {
xtype: 'textarea',
readOnly: true,
height: 150,
value: responseData.StackTrace
}
});
}
}

(http://whatisextjs.com/extjs-4-tutorial/asp-net-mvc3-extjs4-errors#respond)
But it is unclear about where the window “win” is being created and how to apply the windowConfig to window “win”, i just tried putting the code before closing the function [/URL]handleAjaxError.
[URL="http://whatisextjs.com/extjs-4-tutorial/asp-net-mvc3-extjs4-errors#respond"]

return Ext.create('Ext.window.Window', windowConfig).show();

but no error window is coming up.

(http://whatisextjs.com/extjs-4-tutorial/asp-net-mvc3-extjs4-errors#respond)

vietits
11 Apr 2012, 4:52 PM
Let have a try with my suggestion in red color:


// Custom error handler window
handleAjaxError = function ( ajaxResponse ) {
var responseData = Ext.JSON.decode(ajaxResponse.responseText),
win = null,
windowConfig = null;

if (!responseData) // request timed out?
{
responseData = {
ExceptionType: 'Timeout',
Message: 'It appears the request timed out, please try again!'
};
}

// Window to show
windowConfig = {
title: 'Error: ' + Ext.htmlEncode(responseData.ExceptionType),
layout: 'anchor',
defaults: { anchor: '100%' },
modal: true,
resizable: false,
width: 400,
items:
[
{
xtype: 'container'
, autoScroll: true
, html: '<img style="float: left; padding: 5px;" src="../extjs/resources/themes/images/gray/shared/icon-error.gif">'
+ Ext.htmlEncode(responseData.Message)
}
], // eo items
buttons:
[
{ text: 'OK', handler: function() { win.destroy(); } }
], // eo buttons
listeners: {
afterrender: { // make sure layout sized properly
single: true,
buffer: 10,
fn: function() { return; win.doLayout(); }
} // eo afterrender
} // eo listeners
};

// Stack trace panel on the bottom?
if ( responseData.StackTrace )
{
windowConfig.items.push({
xtype: 'panel',
title: 'Stack Trace',
collapsible: true,
collapsed: true,
titleCollapse: true,
layout: 'fit',
listeners: {
collapse: function() { win.doLayout(); },
expand: function() { win.doLayout(); }
},
items: {
xtype: 'textarea',
readOnly: true,
height: 150,
value: responseData.StackTrace
}
});
}


win = Ext.create('Ext.window.Window', windowConfig);
win.show();
}