JAVASCRIPT

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

August 24, 2009

TABLE OF CONTENTS:

If you thought that building prompt and confirm windows by using the Ext JS package was a fairly easy process, then you'll be amazed when I show you how simple is to create a cool alert box. I may be overreacting here, but actually constructing this kind of box is only a matter of using a brand new method, not surprisingly called "alert()," with the correct parameters. That's all.

Having said that, please take a look at the following code sample. It creates an alert window by using the aforementioned JavaScript method:

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

<head>

<title>Building alert box with Ext JavaScript library</title>

// display alert box when sample button is clicked on

Ext.onReady(function(){

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

Ext.MessageBox.alert('Status', 'Your file data was saved!');

});

</script>

</head>

<body>

<h1>Building alert box with Ext JavaScript library</h1>

<button id="samplebutton">Display alert box</button>

</body>

</html>

Definitely, the above example isn't rocket science, right? As you can see, the alert box is built simply by using the pertinent "alert()" method that I mentioned a few lines before, which permits you to specify certain additional input parameters, such as the messages that will be displayed within the box in question.

In addition, the following screen shot will give you a clearer idea of how this alert box looks:

So far, so good, right? Assuming that you already grasped the logic behind building an alert box with the Ext JS library, it's time to continue exploring its numerous capabilities. Therefore, in the section to come, I'm going to teach you how to create a pretty useful wait bar in a few simple steps.

As you may have guessed, to learn the complete details on how this wait bar will be constructed using the Ext JS framework, you'll need to click on the link that appears below and keep reading.

Next: Building a useful wait window with the Ext JS library >>