Home arrow JavaScript arrow Page 4 - 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 an appealing error box
(Page 4 of 4 )

As you might have guessed, building an error box by using the Ext JS framework is very similar to constructing a warning window like the one developed in the previous section. But you're probably scratching your head and wondering how an error box can be turned into an error window, right?

Well, it's pretty simple actually, since the process only requires embedding an error icon into the window in question. Period. Nevertheless, this explanation is pretty insufficient by itself, so here's the complete source code that builds the aforementioned error window:

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

Ext.onReady(function(){

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

Ext.MessageBox.show({

title: 'Error Icon',

msg: 'This is an error box!',

buttons: Ext.MessageBox.OK,

animEl: 'samplebutton',

icon: Ext.MessageBox.ERROR

});

});

});

</script>

</head>

<body>

<h1>Building an error box with Ext JavaScript library</h1>

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

</body>

</html>

As you can see, the above example looks nearly identical to the one that I developed in the previous section, with a subtle difference. In this specific case, the message box includes an error icon, as demonstrated by the following line of JavaScript code:

icon: Ext.MessageBox.ERROR

That was really easy to understand, right? In addition, you should have a look at the image below, which depicts the visual appearance of the above error window. Here it is:



And with this concluding example, I'm finishing this series on building message boxes by means of the useful Ext JS library. As usual with my articles on web development, feel free to utilize all of the code samples included in this tutorial, so you can arm yourself with a solid background in this powerful JavaScript framework.

Final thoughts

As I said before, we've come to the end of this series. If you went through all of its tutorials, then you'll have a clear idea of how to use the Ext JS package to build really cool message boxes in a few minutes. Keep in mind, however, that this library also can be utilized to create Ajax applications, web page grids, dynamic forms, and so forth. If you want to discover all of its features, its official web site, located at http://extjs.com, is the best place to go.

See you in the next web development tutorial!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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