Building Dynamic Web Forms with the Ext JS Framework - Building a simple contact form
(Page 2 of 4 )
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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Building Simple Dynamic Form with Ext JS</title>
<link rel="stylesheet" type="text/css" href="ext-all.css"/>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="forms.css"/>
<!-- common styles for the examples -->
<link rel="stylesheet" type="text/css" href="examples.css"/>
</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 >>
More JavaScript Articles
More By Alejandro Gervasio
