Creating Confirm Boxes and Progress Bars with the Ext JS Library
Welcome to the second article in a five-part series that shows you how to build cool message windows with the Ext JS library. In this article you will learn how to build a professional-looking progress bar and an improved confirm box. You'll find that constructing these user interface components with this library is quite easy.
Creating Confirm Boxes and Progress Bars with the Ext JS Library - Building a cool progress bar (Page 4 of 4 )
As I explained in the introduction of this article, the Ext JS package offers plenty of options for quickly building robust web-based interfacing widgets. This is especially obvious when you need to construct dynamic progress bars that must look truly professional.
Admittedly, building a progress bar with the Ext JS library doesn't differ too much from constructing confirm and prompt boxes, since this particular process requires the use of practically the same JavaScript methods that you learned before.
However, don't take my word for it; see for yourself how simple it is to construct a progress bar with the Ext JS package by means of the following hands-on example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As I told you before, the source code required for building a progress bar with the Ext JS framework is very similar to that used to construct confirm and prompt boxes as well. As you can see above, the progress bar is created by way of the "show()" method that belongs to the "MessageBox" class. It accepts a few incoming parameters, including the bar's width and title, the progress message, etc.
Obviously, the previous explanation would be incomplete if I didn't provide you with an image that shows you clearly how this progress bar really looks so I included one for this purpose. Here it is:
Indeed, it's hard to believe that a few lines of JavaScript code and basic markup can be all the source code required for building a progress bar like the one shown above, but that's where the strength of the Ext JS framework becomes evident.
With this example, I'm finishing this second chapter on how to create enhanced confirm boxes and progress bars by using the Ext JS library. Of course, you're completely free to use all of the code samples included in this tutorial to improve your skills for building these powerful web-based widgets.
Final thoughts
In this second article of the series, you hopefully learned how to build a professional-looking progress bar and an improved confirm box by way of the thorough Ext JS JavaScript package. As you saw earlier, constructing these user interfacing components with this library is a no-brainer process that can be performed with minor efforts.
In the upcoming tutorial, I'm going to teach you how to build eye-catching alert boxes and wait bars by utilizing practically the same set of JavaScript methods included with the Ext JS framework. Now that you've been warned, you don't have any excuses to miss it!
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 
/ 10 
Building Message Windows with the Ext JS Library
