JAVASCRIPT

Building Dynamic Web Forms with the Ext JS Framework

If you do any programming in JavaScript for the web, you've probably heard about a number of third-party libraries that can make your life a lot easier. This five-part series will introduce you to Ext JS, one of the more versatile frameworks. You'll be amazed at how much you can accomplish with it.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 7

January 27, 2009

TABLE OF CONTENTS:

A good way to show you the power of the Ext JS framework when it comes to building dynamic web forms is by creating a simple one. Our example will include some typical fields, such as the user’s first and last names, the company he/she is working for, the corresponding email address, a comments box, and finally a drop-down menu for entering the current time.

Building a contact form like the one described above using plain HTML would require coding some input text boxes, probably a “<select>” menu, and finally a couple of “<form>” tags. However, if you’re going to perform the same task utilizing the Ext JS library, the approach is radically different, as you’ll see in a moment.

First, no structural markup is necessary to build the contact form, since the library will perform this process automatically for you after the web page has been loaded. So, initially, all of the markup required to construct this simple dynamic web form would look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Building Simple Dynamic Form with Ext JS</title>

</head>

<body>

<h1>Dynamic Form built with Ext JS library</h1>

</body>

</html>

That was really basic (X)HTML markup, wasn’t it? As you can see, the above sample file is tasked only with downloading all of the JavaScript and CSS files included with the Ext JS library, to create the contact web form once the whole web page finishes loading.

In this particular case, all of the source files in question are located in the same directory. Normally, the Ext JS library distributes them to different locations, so make sure your web pages download these files from the correct directories.

So far, so good, right? At this point, I showed you how to create a basic (X)HTML file whose primary task is to download all of the Ext JS dependencies required to build a dynamic contact form. So, what's next?

Well, in the following section, things will get much more interesting. I’m going to include in the previous (X)HTML file the JavaScript code necessary to build this simple web form.

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

Next: Building a dynamic contact web form >>