Developing Information and Question Boxes with the Ext JS Library - Building a dynamic wait bar with the Ext JS library
(Page 2 of 4 )
Taking into account the possibility that you haven’t had the chance to read the preceding article of the series, below I listed the complete source code of the example that concluded that particular tutorial. In this case, the example showed you how to build an appealing wait bar, which could be used with a great variety of web applications.
Having said that, please pay close attention to the following code sample, which builds a wait bar by using the API provided by the Ext JS library:
<!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 wait bar 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 wait bar when sample button is clicked on
Ext.onReady(function(){
Ext.get('samplebutton').on('click', function(){
Ext.MessageBox.show({
msg: 'Saving your file, please wait...',
progressText: 'Saving file data...',
width:300,
wait:true,
waitConfig: {interval:100},
icon:'ext-mb-download',
animEl: 'samplebutton'
});
});
});
</script>
</head>
<body>
<h1>Building a wait bar with Ext JavaScript library</h1>
<button id="samplebutton">Display Wait Bar</button>
</body>
</html>
As shown above, creating a wait bar with the Ext JS package requires only using an instance of its “MessageBox” class, in conjunction with the “show()” method. As you saw before, in the context of the Ext JS framework, the previous box is called simply a “wait” bar, but I’d feel rather inclined to consider it a progress bar instead.
Regardless of the way that you think the previous message window should be used, it’s clear to see that it’s fairly simple to create, right? Of course, aside from showing you the corresponding source code of this wait bar, I should provide you with an additional image that helps you to see its visual appearance. Here it is:
Well, now that you know how to build a professional-looking wait bar using the Ext JS library, it’s time to explore some other useful features that come bundled with it. As you read in the beginning of this article, the library permits you to construct different kinds of informative boxes with relative ease.
Thus, in the course of the following section, I’m going to teach you specifically how to create a simple information window, which will look really professional.
However, this topic will be discussed in depth in the next few lines, so click on the link below and keep reading.
Next: Building a simple info box with the Ext JS library >>
More JavaScript Articles
More By Alejandro Gervasio
