Developing Information and Question Boxes with the Ext JS Library - Building a simple info box with the Ext JS library
(Page 3 of 4 )
In consonance with the concepts that I deployed in the previous section, the Ext JS library allows you to easily build four types of basic boxes that can be used to display a variety of messages on the browser, such as errors, warnings, descriptive information, etc.
So first, I’m going to demonstrate how to construct a simple “info” box, but in this tutorial and the next one, I’m going to discuss the construction of the other ones as well.
Well, having clarified that point, please take a look at the following example, which shows how easy it is to build an appealing info box with the Ext JS library. 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 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>
As you can see, constructing a basic information box by means of the Ext JS package is actually a no-brainer process that can be performed with minor efforts. Basically, the construction process is reduced to using an instance of the already familiar “MessageBox” JavaScript class that you saw in previous examples, in conjunction with its respective “show()” method. That’s all.
In addition, you should notice that this informative window also contains a descriptive icon, which is displayed by using the following input argument:
icon: Ext.MessageBox.INFO
The above parameter is indeed very relevant, since it permits you to build the four basic types of information boxes that I mentioned earlier by assigning different icons to the window in question. Quite simple to grasp, right?
And before I forget, here’s a screen shot that shows the visual appearance of the info box:
All right, at this stage you should feel satisfied, since hopefully you learned how to create an appealing info box using only a few lines of JavaScript code. What else can you ask for? Well, actually you can ask for much more when it comes to building informative windows with the Ext JS library!
In this specific case, however, I’m only going to partially satisfy your curiosity. This tutorial contains only one more section, and I plan to use it to teach you how to use the Ext JS framework to build a brand new box, called the “question” window.
Sounds good enough to you? Great! Click on the link below and keep reading.
Next: Constructing an appealing question box >>
More JavaScript Articles
More By Alejandro Gervasio
