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:

/ 13

August 17, 2009

TABLE OF CONTENTS:

print this article

SEARCH DEVARTICLES

TOOLS YOU CAN USE

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">

<head>

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

// 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">

<head>

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

// 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">

<head>

<title>Building a multi-line confirm box with Ext JavaScript library</title>

// 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.

Next: Building enhanced confirm boxes with Ext JS >>

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

Find More JavaScript Tutorials

Watch our Tech Videos
Dev Articles Forums

Articles

Forums

All Feeds

Write For Us

Weekly Newsletter
Developer Updates
Free Website Content

Site Map

Privacy Policy
Support

Dev Articles

JavaScript

Creating Confirm Boxes and Progress Bars with the Ext JS Library

Developer Shed Affiliates

Popular Web Development Topics

All Web Development Tutorials