Hi All
I have been going through the classes we have developed over the last few years and sharing back with the community some of them that I think will be useful to others. These components have been tested extensively in ext-3.2.1.
Here is: Ext.ux.ShowHideLoadingMask
A singleton used to show or hide the loading mask manually or automatically while requests are still outstanding. Remoting features are tested using ext direct with the direct provider stored in a global javascript variables called directProvider.
Code:
/**
* @author Will Ferrer, Ethan Brooks
* @copyright (c) 2012, Intellectual Property Private Equity Group
* @licensee 2012 developed under license for Switchsoft LLC http://www.switchsoft.com a "Direct response telephony company" as part of it's "VOIP Call distribution, ROI analysis platform, call recording, and IVR for inbound and outbound sales" and Run the Business Systems LLC a "Technology development investment group" as part of it's "PHP, Javascript rapid application development framework and MySQL analysis tools"
* @license licensed under the terms of
* the Open Source LGPL 3.0 license. Commercial use is permitted to the extent
* that the code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
* <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
* target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
* We are pretty nice just ask. We want to meet our licensees
*/
/*
* date: 06/10/10
* @class Ext.ux.ShowHideLoadingMask
* @singleton
* @extends Object
* A singleton used to show or hide the loading mask manually or automatically while requests are still outstanding. Remoting features are tested using ext direct with the direct provider stored in a global javascript variables called directProvider.
* @constructor
*/
Ext.ns('Ext.ux');
Ext.ux.ShowHideLoadingMask = function(){
return {
/**
* @cfg {Boolean} listenForRemoting
* whether or not to listen for remoting
*/
listenForRemoting : true,
/**
* @cfg {Boolean} displayExceptions
* whether or not to display exceptions
*/
displayExceptions : true,
/**
* @cfg {Boolean} redirectToLoginIfHtmlReturn
* whether or not to redirect to the login page if a direct request returns a html document
*/
redirectToLoginIfHtmlReturn : true,
/** Public Function: show
* Shows the loading mask
*/
show : function () {
Ext.MessageBox.wait('Loading...', 'Loading');
},
/** Public Function: hide
* Shows the loading mask
*/
hide : function () {
Ext.MessageBox.hide();
if (Ext.ux.ShowHideLoadingMask.displayExceptions && arguments[1].type == 'exception') {
var errorWindow = new Ext.Window({
title : 'Unhandled Exception',
modal : true,
width : 400,
height : 300,
autoScroll : true,
html : arguments[1].message
});
errorWindow.show();
}
if (Ext.ux.ShowHideLoadingMask.redirectToLoginIfHtmlReturn && arguments[1].type == 'exception' && arguments[1].xhr.responseText.match(/^<html>/)) {
window.location = '/';
}
},
/** Public Function: listenForRemoting
* Show hide the mask based on remoting calls automatically
*/
listenForRemoting : function (provider) {
provider.on("call", Ext.ux.ShowHideLoadingMask.show, this);
provider.on("data", Ext.ux.ShowHideLoadingMask.hide, this);
provider.on("exception", Ext.ux.ShowHideLoadingMask.hide, this);
Ext.Ajax.on("requestcomplete", Ext.ux.ShowHideLoadingMask.hide, this);
Ext.Ajax.on("requestexception", Ext.ux.ShowHideLoadingMask.hide, this);
}
};
}();
Ext.reg('ux-showhideloadingmask', Ext.ux.ShowHideLoadingMask);
if (Ext.ux.ShowHideLoadingMask.listenForRemoting) {
Ext.onReady(function () {
Ext.ux.ShowHideLoadingMask.listenForRemoting(directProvider);
});
}
Best regards
Will Ferrer (Run the Business)