Home arrow JavaScript arrow Page 2 - Constructing Alert Boxes and Wait Bars with the Ext JS Library
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
Rating: 3 stars3 stars3 stars3 stars3 stars / 2
August 24, 2009
TABLE OF CONTENTS:
  1. · Constructing Alert Boxes and Wait Bars with the Ext JS Library
  2. · Building a progress bar with the Ext JS JavaScript framework
  3. · Constructing a professional-looking alert box
  4. · Building a useful wait window with the Ext JS library

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Constructing Alert Boxes and Wait Bars with the Ext JS Library - Building a progress bar with the Ext JS JavaScript framework
(Page 2 of 4 )

Before I show you how to build professional-looking alert boxes and wait bars with the Ext JS library, it'd be helpful to review the last hands-on example that I coded in the previous article of this series. It demonstrated how to create a neat progress bar. 

Having said that, here's the full source code of this particular example, accompanied by an illustrative image:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

<link rel="stylesheet" type="text/css" href="ext-all.css" />

<link rel="stylesheet" type="text/css" href="xtheme-default.css" />

<script type="text/javascript" src="ext-base.js"></script>

<script type="text/javascript" src="ext-all.js"></script>

<!-- load common styles for the examples -->

<link rel="stylesheet" type="text/css" href="examples.css" />

<script type="text/javascript">

// display progress bar when sample button is clicked on

Ext.onReady(function(){

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

Ext.MessageBox.show({

title: 'Please wait',

msg: 'Loading target file.',

progressText: 'Initializing...',

width:300,

progress:true,

closable:false,

animEl: 'samplebutton'

});

});

});

</script>

</head>

<body>

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

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

</body>

</html>



By studying the above example, you can see that it's pretty easy to construct a progress bar with the Ext JS package. We need only use an instance of the "MessageBox" class, naturally included in the library, and call its "show()" method with the appropriate incoming parameters.

In this case, the progress bar itself hasn't been tied to a particular event, such as a file uploading process or a similar task, since this is intended to be only an introductory example. Nonetheless, the Ext JS' official web site provides numerous examples of how to use each of its widgets. If you're interested in taking a closer look at a wider variety of examples, please visit its site, located at: http://extjs.com/.

Well, at this point you hopefully recalled the basics of how to build a progress bar with the Ext JS package, so it's time to learn more useful things you can do with it. Thus, in the following section, I'm going to teach you how to create realistic alert boxes by means of a few lines of JavaScript code.

Want to say goodbye to old-fashioned alert windows? Read the section to come, to learn how to build them with Ext JS!


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 7 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials