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
Rating: 4 stars4 stars4 stars4 stars4 stars / 13
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

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

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2014 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials