Home arrow JavaScript arrow Page 2 - Creating Confirm Boxes and Progress Bars with the Ext JS Library
JAVASCRIPT

Creating Confirm Boxes and Progress Bars with the Ext JS Library


Welcome to the second article in a five-part series that shows you how to build cool message windows with the Ext JS library. In this article you will learn how to build a professional-looking progress bar and an improved confirm box. You'll find that constructing these user interface components with this library is quite easy.

Author Info:
By: Alejandro Gervasio
Poor Best
Rating: 4 stars4 stars4 stars4 stars4 stars / 10
August 17, 2009
TABLE OF CONTENTS:
  1. · Creating Confirm Boxes and Progress Bars with the Ext JS Library
  2. · Review: creating simple prompt and confirm boxes using the Ext JS library
  3. · Building enhanced confirm boxes with Ext JS
  4. · Building a cool progress bar

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Creating Confirm Boxes and Progress Bars with the Ext JS Library - Review: creating simple prompt and confirm boxes using the Ext JS library
(Page 2 of 4 )

Before we dive in, let's briefly review some of the examples coded in the preceding tutorial, where we constructed single and multi-line prompt windows and basic confirm boxes.

Here are the code samples that show how to create the aforementioned windows using the Ext JS package, along with their corresponding complementary images: 

(example in building a confirm box)

 

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

Ext.onReady(function(){

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

Ext.MessageBox.confirm('Confirm', 'Are you sure you want to perform this task?');

});

});

</script>

</head>

<body>

<h1>Building a confirm box with Ext JavaScript library</h1>

<button id="samplebutton">Display Confirm Box</button>

</body>

</html>

 

 

 

(example in building a single-line prompt box)

 

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

Ext.onReady(function(){

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

Ext.MessageBox.prompt('Email', 'Enter your email address:');

});

});

</script>

</head>

<body>

<h1>Building a prompt box with Ext JavaScript library</h1>

<button id="samplebutton">Display Prompt Box</button>

</body>

</html>

 

 

 

(example in building a multi-line prompt box)

 

<!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 multi-line confirm 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 multi-line prompt box when sample button is clicked on

Ext.onReady(function(){

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

Ext.MessageBox.show({

title: 'Email',

msg: 'Please enter your email address:',

width:300,

buttons: Ext.MessageBox.OKCANCEL,

multiline: true,

animEl: 'samplebutton'

});

});

});

</script>

</head>

<body>

<h1>Building a multi-line prompt box with Ext JavaScript library</h1>

<button id="samplebutton">Display Prompt Box</button>

</body>

</html>

 

 

Well, after studying in detail all of the above examples, it's quite possible that you've recalled how to use the methods provided by the Ext JS library to build a couple of single and multi-line prompt windows, as well as a basic confirm box. As you can see, all of these message boxes indeed look very professional and can be constructed with minor efforts.

So far, I've taught you how to build simple confirm windows that include two typical buttons, labeled "Yes" and "No" respectively. However, it's also extremely easy to create a similar box that contains an additional "Cancel" button.

That will be precisely the topic that I'll discuss in the section to come, so please click on the link below and keep reading.


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
Find More JavaScript Tutorials

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