It couldn’t be easier to have an attractive loading message that actually prevents those click-happy users from firing off 20 AJAX requests because they didn’t know anything happened when they clicked that “Order Now” link.

Include the jQuery library, the core Ext functions and the dialog functions.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ext-core.js"></script>
<script type="text/javascript" src="js/ext-dialogs.js"></script>

Use the jQuery ajaxStart() and ajaxStop() methods to show a modal dialog that the user can’t mess with.

$(document).ready(function() {
	dialog = new Ext.BasicDialog("loading", {
	        modal:true,
        	width:200,
        	height:100,
        	shadow:true,
        	collapsible:false,
        	draggable:false,
        	resizable:false,
        	closable:false
	});

	$("#loading")
		.ajaxStart(function(){ dialog.show(); })
		.ajaxStop(function(){ dialog.hide(); });
}

Lastly, a simple DIV with an animated gif and some text.

<div id="loading" style="display:none;">
    <div class="x-dlg-hd">Processing...</div>
	<div class="x-dlg-bd">
		<div class="x-dlg-tab" title="">
			<div class="inner-tab" style="font-size:1.25em; font-weight:800;"><img style="margin-right:15px;" src="images/loadingcolors.gif" border="0" />Please wait...</div>
		</div>
	</div>
</div>

Now when the user fires an event that requires an AJAX call, the dialog will immediately appear to prevent any further interaction with the site, and then disappear once the request is done.
Loading dialog