Home arrow JavaScript arrow Page 3 - Building Message Windows with the Ext JS Library
JAVASCRIPT

Building Message Windows with the Ext JS Library


Third-party packages present you with many options for building rich web-based user interfaces. They can be used to fit a broad range of requirements. You may even have used such packages as the Yahoo User Interface and the Scriptaculous DHTML framework. But there's a new library worth looking into. It's called Ext JS. We'll take a close look at how it can help us build user interfaces in this five-part series.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 6
August 10, 2009
TABLE OF CONTENTS:
  1. · Building Message Windows with the Ext JS Library
  2. · Building a professional-looking confirm box
  3. · Building a prompt box
  4. · Creating a multi-line prompt box

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Building Message Windows with the Ext JS Library - Building a prompt box
(Page 3 of 4 )

As I stated in the prior section, the Ext JS library comes with a respectable number of interactive windows, including the popular prompt boxes. Of course, building this type of window is actually a no-brainer process; it only requires a few lines of JavaScript code and some basic markup.

The following hands-on example demonstrates how to display a simple prompt box in the browser by using a brand-new method, called “prompt()”:


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


As you can see in the above example, a single-line prompt box will be displayed on screen via the aforementioned “prompt()” method, which comes with the Ext JS library. In this particular case, the method in question will show a trivial message, but this can be easily modified to use different prompting text.

The practical example that you just learned would be rather incomplete if I didn’t show you how the previous prompt box looks, so here it is:



So far, so good. Now that you've hopefully grasped how to build a prompt box with the Ext JS package, it’s time to continue exploring its remarkable capabilities. In the upcoming section, I’m going to show you how to build a multi-line prompt window.

Click on the link that appears below and read the next few lines. I’ll be there, waiting for you.


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

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