Building Warning and Error Boxes with the Ext JS Library - Building info and question boxes with the Ext JS library
(Page 2 of 4 )
As I stated in the introduction, the Ext JS framework permits you to build four distinct types of informative windows that can be used in different situations. In the previous article, I discussed how to create a pair of information and question boxes by using the "MessageBox" JavaScript class included in the library. Now let's quickly recall how these boxes were constructed.
Below I included two code samples that build these message windows, accompanied by the corresponding screen helps. Here they are:
<!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 info 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 the info box when sample button is clicked on
Ext.onReady(function(){
Ext.get('samplebutton').on('click', function(){
Ext.MessageBox.show({
title: 'Info Icon',
msg: 'This is an info box!',
buttons: Ext.MessageBox.OK,
animEl: 'samplebutton',
icon: Ext.MessageBox.INFO
});
});
});
</script>
</head>
<body>
<h1>Building info box with Ext JavaScript library</h1>
<button id="samplebutton">Display info box</button>
</body>
</html>
<!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 question 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 question box when sample button is clicked on
Ext.onReady(function(){
Ext.get('samplebutton').on('click', function(){
Ext.MessageBox.show({
title: 'Question Icon',
msg: 'This is a question box!',
buttons: Ext.MessageBox.OK,
animEl: 'samplebutton',
icon: Ext.MessageBox.QUESTION
});
});
});
</script>
</head>
<body>
<h1>Building a question box with Ext JavaScript library</h1>
<button id="samplebutton">Display question box</button>
</body>
</html>
Now that you've examined the hands-on examples listed above, I will assume that you know how to use the Ext JS framework to build a pair of appealing info and question boxes.
Am I correct about this? Good! Now it's time to learn how to create a warning window by using practically the same approach demonstrated with the previous examples.
To see how this brand new warning box will be constructed, please click on the link that appears below and read the following section.
Next: Building a warning box with the Ext JS framework >>
More JavaScript Articles
More By Alejandro Gervasio
