Home arrow JavaScript arrow Page 3 - Building Warning and Error Boxes with the Ext JS Library
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
Rating: 3 stars3 stars3 stars3 stars3 stars / 3
September 14, 2009
TABLE OF CONTENTS:
  1. · Building Warning and Error Boxes with the Ext JS Library
  2. · Building info and question boxes with the Ext JS library
  3. · Building a warning box with the Ext JS framework
  4. · Building an appealing error box

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Building Warning and Error Boxes with the Ext JS Library - Building a warning box with the Ext JS framework
(Page 3 of 4 )

Building an appealing warning box with the Ext JS framework is a very simple process that only requires changing one of the input parameters accepted by the "show()" method that belongs to the "MessageBox" JavaScript class used previously.

Yes, I know that it's hard to believe, but a warning window can be created just like a regular box which simply includes a warning icon. That's not rocket science! So now it's time to show you how this box can be built using the Ext JS package.

Below I coded another practical example, which builds the warning window. Here it is:

<!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 warning box 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 a warning box when sample button is clicked on

Ext.onReady(function(){

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

Ext.MessageBox.show({

title: 'Warning Icon',

msg: 'This is a warning box!',

buttons: Ext.MessageBox.OK,

animEl: 'samplebutton',

icon: Ext.MessageBox.WARNING

});

});

});

</script>

</head>

<body>

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

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

</body>

</html>

As demonstrated above, the pertinent warning box is built by using a regular informative window that specifically includes a warning icon. Of course, you'll get a better grasp of how this construction process is performed if you look at the following line of JavaScript code:

icon: Ext.MessageBox.WARNING

As you can see, in this particular case, the corresponding warning icon is embedded into the message window before being displayed on screen. In addition, the visual appearance of this box can be seen pretty clearly in the screen shot below:



After having analyzed the previous hands-on example, you'll have to agree with me that building a professional warning window by way of the Ext JS library is actually a no-brainer process that can be tackled even without being a JavaScript guru!

So far, so good. At this level, you hopefully grasped the logic that stands behind building a few informative boxes with the Ext JS package. However, as I noted before, the library supports the creation of four different kinds of windows. Up to now, I've discussed three of them, meaning that there's a final one, called "error box," which still remains uncovered.

Provided that you're interested in learning how this last message window can be constructed with the Ext JS library, the final section of this article will be dedicated to explaining the full details of this process.

Click on the link included below and keep reading. We're almost finished!


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 9 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials