Third-party packages present you with many options for building rich web-based user interfaces. They can be used to fit a broad range of requirements. You may even have used such packages as the Yahoo User Interface and the Scriptaculous DHTML framework. But there's a new library worth looking into. It's called Ext JS. We'll take a close look at how it can help us build user interfaces in this five-part series.
Building Message Windows with the Ext JS Library - Building a professional-looking confirm box (Page 2 of 4 )
Before I start showing you how to build eye-catching prompt and confirm boxes with the Ext JS package, I’d like to introduce some basic concepts that will help you more easily understand how this library works.
Each time you wish to do something with the library, you must use its workhorse class, called “Ext.” Then, with an instance of this class available, you’re able to call its numerous methods, according to the type of task that you need to perform.
Among the copious methods included with the aforementioned “Ext” class is one that is particularly useful. It's called “onReady().” This method will be automatically called by the Ext JS library after the entire web document has been loaded. This allows it to execute JavaScript code via a “backload” process.
And finally, to wrap up this brief explanation of the most relevant methods that come bundled with Ext JS, I have to mention one called “get(),” which, as you’ll see in a moment, can be defined as a more sophisticated version of the native “getElementById()” DOM method, which you’ve probably used many times before.
Now that I have quickly outlined how these three methods function, you’re equipped with the required background to start building professional-looking prompt and confirm boxes with the Ext JS package. In this particular case, I’m going to begin showing you how to construct a confirm box. Please pay close attention to the following example, which will display the box in question after the user clicks on a sample form button. Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Even though the above example is pretty easy to follow, I’m going to dissect its code, so you can grasp how it works. As you can see, there’s a bunch of JavaScript and CSS files that are downloaded in conjunction with the corresponding web document.
Naturally, these files are the dependencies required by the Ext JS package to build the different user interface components and apply the respective CSS styles to them. Still with me?
Okay, after the source files have been properly loaded by the browser, the action really begins. As you can see, there’s a simple web form button identified as “samplebutton,” which is used to construct a confirm box after the web page finishes loading.
But, how is this box really built? Well, it’s clear to see that the “onReady()” method is called after the complete web document has been loaded; its input argument is another function. Then, this incoming function uses the above “get()” method to retrieve the pertinent sample button. And finally, the confirm box is created by way of the following line:
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to perform this task?');
Pretty simple to grasp, isn’t it? As you can see, building an interactive confirm box using the Ext JS library only requires a few lines of JavaScript code and basic markup. That’s it. However, if you’re anything like me, then you’ll want to see how this box looks. Below I included a screen shot that shows its visual appearance. Here it is:
After looking at the above image, you’ll have to agree with me that this sample confirm box looks really professional. And best of all, it was built in a snap!
All right, at this point, you've hopefully learned how to use the Ext JS package in order to build an interactive, eye-catching confirm box. Therefore, the next thing that I’m going to teach you will be how to use the same JavaScript methods for building a prompt box.
Want to see how this will be achieved? Jump forward and read the next few lines.
JavaScript 
/ 6 
Creating Confirm Boxes and Progress Bars with the Ext JS Library
