Constructing Alert Boxes and Wait Bars with the Ext JS Library
Welcome to the third part of a five-part series on building message boxes with the Ext JS framework. In this installment of the series, I will walk you through creating an appealing alert box and a useful wait bar by utilizing a few intuitive JavaScript classes bundled with the library. You'll find the task to be easy to tackle.
Constructing Alert Boxes and Wait Bars with the Ext JS Library - Building a useful wait window with the Ext JS library (Page 4 of 4 )
In consonance with the concepts that I expressed in the previous section, I'd like to finish this tutorial by showing you how to take advantage of the functionality provided by the Ext JS library to build a useful wait bar.
Of course, if you've carefully studied all of the previous examples, then it's quite probable that you already have a vague idea of how this wait window can be created. However, this is merely an assumption of mine, so let me show you a concrete example that demonstrates how to construct the wait bar by using the Ext JS package.
Here's how the example in question looks:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Didn't I tell you that building a eye-catching wait bar by using the Ext JS framework was indeed a no-brainer process? And certainly it is! As you can see from the above hands-on example, I used the same "MessageBox" JavaScript class, in conjunction with its pertinent "show()" method, to define certain parameters of the wait bar in question. These include the indicative message that will displayed by it, its respective width expressed in pixels, its animation time, etc.
Naturally, the previous explanation would be insufficient if I didn't provide you with an image that helps you see how the wait bar looks, so here it is:
If you're anything like me, then you'll find the above wait bar very similar to a progress window. Obviously, the differences between them are fairly subtle, and how they'll be used depends strongly on the context of the web application with which you're working.
Well, having taught you how to build a professional-looking wait bar with the Ext JS library, I must say that my mission has been accomplished, at least momentarily. Of course, as always, feel free to use all of the code samples developed in this tutorial to acquire a better background in building alert boxes and wait bars by means of the API provided by the Ext JS framework. Fun is already guaranteed!
Final thoughts
In this third installment of the series, I walked you through creating an appealing alert box and a useful wait bar by utilizing a few intuitive JavaScript classes bundled with the Ext JS library. Hopefully, the process has been instructive, and easy to tackle as well.
In the next tutorial, I'm going to continue exploring the solid capabilities of the Ext JS package. You'll learn how to create different information and question boxes.
Curious about how these eye-catching message windows will be constructed? Don't miss the next part!
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
JavaScript 
Creating Confirm Boxes and Progress Bars with the Ext JS Library
