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 progress bar with the Ext JS JavaScript framework (Page 2 of 4 )
Before I show you how to build professional-looking alert boxes and wait bars with the Ext JS library, it'd be helpful to review the last hands-on example that I coded in the previous article of this series. It demonstrated how to create a neat progress bar.
Having said that, here's the full source code of this particular example, accompanied by an illustrative image:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
By studying the above example, you can see that it's pretty easy to construct a progress bar with the Ext JS package. We need only use an instance of the "MessageBox" class, naturally included in the library, and call its "show()" method with the appropriate incoming parameters.
In this case, the progress bar itself hasn't been tied to a particular event, such as a file uploading process or a similar task, since this is intended to be only an introductory example. Nonetheless, the Ext JS' official web site provides numerous examples of how to use each of its widgets. If you're interested in taking a closer look at a wider variety of examples, please visit its site, located at: http://extjs.com/.
Well, at this point you hopefully recalled the basics of how to build a progress bar with the Ext JS package, so it's time to learn more useful things you can do with it. Thus, in the following section, I'm going to teach you how to create realistic alert boxes by means of a few lines of JavaScript code.
Want to say goodbye to old-fashioned alert windows? Read the section to come, to learn how to build them with Ext JS!