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

Poor Best

Rating:

/ 6

August 10, 2009

TABLE OF CONTENTS:

If you found it simple to build a basic prompt box with the Ext JS library, then I’m sure that creating a multi-line window will be even easier for you. To demonstrate how this kind of box can be constructed in a few steps, below I coded another illustrative example that shows how to perform this task:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Building a multiline 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>

Undoubtedly, the above example is very similar to the one that you learned in the previous section. Therefore, you shouldn’t have major problems understanding how it works. As you can see, first all of the dependencies are downloaded by the browser, and then the multi-line prompt box is constructed by using a brand new method, called “show().”

In this case, the method accepts a number of input parameters, such as the title of the confirm box, its width in pixels, and the control buttons that should also be displayed. Of course, this is only an introductory example of how to use the method, but if you need a full reference on it, you should consult the official Ext JS documentation.

Finally, I used a basic form button to display the multi-line window, which looks like this:

Well, at this point you should feel pretty satisfied, since now you’re armed with the required background to start building attractive message boxes using the functionality provided by the Ext JS package.

As with other topics related to professional web development, practice is the best way to get the most out of this powerful JavaScript library.

Final thoughts

In this first article of the series, I provided you with a quick overview of what you can do with the Ext JS when it comes to building professional-looking messages.

In the next tutorial, I’m going to teach you how to create a few more interactive boxes, including different confirm windows, wait bars, etc. Now that you know what the upcoming article will be about, you won’t want to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.