JAVASCRIPT

Building Warning and Error Boxes with the Ext JS Library

Welcome to the final installment of a five-part series that explains how to build cool message windows with the Ext JS library. This series steps you through creating several interactive message boxes using the Ext JS JavaScript framework, which can speed up the development of rich Internet applications.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

September 14, 2009

TABLE OF CONTENTS:

As I stated in the introduction, the Ext JS framework permits you to build four distinct types of informative windows that can be used in different situations. In the previous article, I discussed how to create a pair of information and question boxes by using the "MessageBox" JavaScript class included in the library. Now let's quickly recall how these boxes were constructed.

Below I included two code samples that build these message windows, accompanied by the corresponding screen helps. Here they are:

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

<head>

<title>Building an info box with Ext JavaScript library</title>

// display the info box when sample button is clicked on

Ext.onReady(function(){

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

Ext.MessageBox.show({

title: 'Info Icon',

msg: 'This is an info box!',

buttons: Ext.MessageBox.OK,

animEl: 'samplebutton',

icon: Ext.MessageBox.INFO

});

</script>

</head>

<body>

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

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

</body>

</html>

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

<head>

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

// display question box when sample button is clicked on

Ext.onReady(function(){

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

Ext.MessageBox.show({

title: 'Question Icon',

msg: 'This is a question box!',

buttons: Ext.MessageBox.OK,

animEl: 'samplebutton',

icon: Ext.MessageBox.QUESTION

});

</script>

</head>

<body>

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

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

</body>

</html>

Now that you've examined the hands-on examples listed above, I will assume that you know how to use the Ext JS framework to build a pair of appealing info and question boxes.

Am I correct about this? Good! Now it's time to learn how to create a warning window by using practically the same approach demonstrated with the previous examples.

To see how this brand new warning box will be constructed, please click on the link that appears below and read the following section.

Next: Building a warning box with the Ext JS framework >>