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.
Next: Creating a multi-line prompt box >>
More JavaScript Articles
More By Alejandro Gervasio
/ 6 
