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!
Next: Building an appealing error box >>
More JavaScript Articles
More By Alejandro Gervasio
