Building Dynamic Web Forms with the Ext JS Framework

In the previous section, I coded a basic (X)HTML file which downloads all of the dependencies required by the Ext JS library to build a basic –- yet dynamic – web form.

However, at this point I haven’t shown you how to create the form. Here is the sequence of steps necessary to accomplish this process successfully and with minor hassles: first, the web form must be constructed after the whole web page has been loaded, and then it must be supplied with the appropriate set of incoming parameters. These parameters will be used to create the corresponding input text boxes, the set of validation rules, and the control buttons that must be provided to users.

Based on this initial schema, the following JavaScript code performs all of the tasks required to build a contact web form like the one described above. Pay close attention to it, please:

Ext.onReady(function(){

Ext.QuickTips.init();

// turn on validation errors beside the field globally

Ext.form.Field.prototype.msgTarget = 'side';

// create simple dynamic form

var theform = new Ext.FormPanel({

labelWidth: 75,

url:'processform.php',

frame:true,

title: 'Simple Form built with Ext JS',

bodyStyle:'padding:5px 5px 0',

width: 350,

defaults: {width: 230},

defaultType: 'textfield',

// define form fields

items: [{

fieldLabel: 'First Name',

name: 'first',

allowBlank:false

},{

fieldLabel: 'Last Name',

name: 'last'

},{

fieldLabel: 'Company',

name: 'company'

}, {

fieldLabel: 'Email',

name: 'email',

vtype:'email'

}, new Ext.form.TimeField({

fieldLabel: 'Time',

name: 'time',

minValue: '9:00am',

maxValue: '5:00pm'

})

],

buttons: [{

text: 'Save'

},{

text: 'Cancel'

}]

});

// display the form

theform.render(document.body);

});

Despite the apparent complexity of the above JavaScript snippet, it’s pretty easy to understand what it does, so let me dissect it for you. First, you can see that all of the code utilized to build the sample contact form has been wrapped into one method included with the Ext JS library, called “onReady().”

We did this simply to make sure that the web form will be constructed after the complete web page has been properly downloaded and displayed. Are you still with me?

All right, now it’s time to focus on the part of the code that actually renders the form. In this case, a brand new class is used to achieve this task, which is called, not surprisingly, “FormPanel.” Obviously, this class accepts a certain number of parameters for defining specific aspects of the web form, such as its submission URL and title, its default width, and so forth.

In addition, the respective input fields of the dynamic contact form are constructed via an array of items that permits you to specify pretty easily their names and labels, and whether or not they will be required.

And finally, the web form is displayed on the browser by using the “render()” method, as indicated by the following line of JavaScript code:

theform.render(document.body);

Well, at this stage you've hopefully learned how to build a simple web form by using the API provided by the Ext JS package. Nonetheless, if you’re anything like me, then you may want to see how this dynamic online form looks. Therefore, I included a screen shot below that shows the visual appearance of the web form in question.

Here it is:

Now that you've taken a close look at the above image, you should have a pretty good idea of how useful the Ext JS package can be when you're building professional-looking web forms.

Nevertheless, I have to admit that the JavaScript code that you learned before  looks disarticulated when analyzed in isolated sections, since it must be integrated with the corresponding structural markup.

Thus, with that idea in mind, in the last section of this initial tutorial of the series, I’m going to list the complete source code required to build a simple contact web form. This way you'll have it available all in one place, in case you want to copy it and paste it into your code editor.

To see the full source code that renders the previous dynamic web form, please click on the link below and keep reading.