JAVASCRIPT

Developing Information and Question Boxes with the Ext JS Library

Welcome to the fourth article in a five-part series on building message boxes with the Ext JS framework. In this part of the series, I demonstrate how to create a couple of message boxes for displaying quick information and different questions to users of a web site.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

August 31, 2009

TABLE OF CONTENTS:

Taking into account the possibility that you haven’t had the chance to read the preceding article of the series, below I listed the complete source code of the example that concluded that particular tutorial. In this case, the example showed you how to build an appealing wait bar, which could be used with a great variety of web applications.

Having said that, please pay close attention to the following code sample, which builds a wait bar by using the API provided by the Ext JS library:

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

<head>

<title>Building a wait bar with Ext JavaScript library</title>

// display wait bar when sample button is clicked on

Ext.onReady(function(){

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

Ext.MessageBox.show({

msg: 'Saving your file, please wait...',

progressText: 'Saving file data...',

width:300,

wait:true,

waitConfig: {interval:100},

icon:'ext-mb-download',

animEl: 'samplebutton'

});

</script>

</head>

<body>

<h1>Building a wait bar with Ext JavaScript library</h1>

<button id="samplebutton">Display Wait Bar</button>

</body>

</html>

As shown above, creating a wait bar with the Ext JS package requires only using an instance of its “MessageBox” class, in conjunction with the “show()” method. As you saw before, in the context of the Ext JS framework, the previous box is called simply a “wait” bar, but I’d feel rather inclined to consider it a progress bar instead.

Regardless of the way that you think the previous message window should be used, it’s clear to see that it’s fairly simple to create, right? Of course, aside from showing you the corresponding source code of this wait bar, I should provide you with an additional image that helps you to see its visual appearance. Here it is:

Well, now that you know how to build a professional-looking wait bar using the Ext JS library, it’s time to explore some other useful features that come bundled with it. As you read in the beginning of this article, the library permits you to construct different kinds of informative boxes with relative ease.

Thus, in the course of the following section, I’m going to teach you specifically how to create a simple information window, which will look really professional.

However, this topic will be discussed in depth in the next few lines, so click on the link below and keep reading.

Next: Building a simple info box with the Ext JS library >>