JAVASCRIPT

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 10

August 17, 2009

TABLE OF CONTENTS:

In the previous section, you hopefully recalled how easy it is to build a professional-looking confirm box by using the functionality of the Ext JS package. However, this library provides you with the capability of constructing an "enhanced" confirm window that not only include the typical "Yes" and "No" buttons, but an additional one, labeled "Cancel."

To understand more clearly how this kind of improved confirm box can be constructed in a few easy steps, please examine the following hands-on example. It builds the box by using the same "show()" method of the Ext JS library that you learned in the previous section. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Building a confirm box with Ext JavaScript library</title>

// display confirm box when sample button is clicked on

Ext.onReady(function(){

Ext.get('samplebutton').on('click', function(e){

Ext.MessageBox.show({

title:'Save Email Address?',

msg: 'Would you like to save your email address?',

buttons: Ext.MessageBox.YESNOCANCEL,

animEl: 'samplebutton',

icon: Ext.MessageBox.QUESTION

});

</script>

</head>

<body>

<h1>Building a confirm box with Ext JavaScript library</h1>

<button id="samplebutton">Display Confirm Box</button>

</body>

</html>

As you can see, the above hands-on example looks very similar to the ones coded in the previous section, so I assume that you won't have any major problems understanding how it works. In this specific case, an enhanced confirm window is built using the already familiar "show()"method that belongs to the Ext JS library, and this time the window in question contains three buttons, labeled "Yes," "No" and "Cancel."

Apart from the aforementioned control buttons, this confirm box includes an additional element -- a "question" icon that is displayed on the left side of the window. As you can see, the inclusion of this brand new element in the window is reduced to specifying an "icon" parameter when calling the pertinent "show()" method. It's really that simple.

Naturally, aside from the examining the code sample that renders this enhanced confirm box, I'm pretty sure that you may want to see how the box really looks. Below I included a screen-capture that shows its visual appearance:

It looks very professional, right? Now that you hopefully learned the key concepts regarding the construction of improved confirm boxes by utilizing the Ext JS framework, it's time to continue exploring the useful features provided by this robust JavaScript library.

In the final section of this article, I'm going to teach you how to use the functionality provided by the Ext JS package to build a full-featured progress bar.

Curious about how this bar will be constructed? Please read the next few lines. They're only one click away.

Next: Building a cool progress bar >>