Grouping Field Sets on Dynamic Web Forms with the Ext JS Framework
In the first part of this series, I showed you how to build a simple dynamic web form with the Ext JS framework. The form performed basic client-side validation on some of its fields. In this second part of a five-part series, I'm going to show you how to build a more complex form with this framework, capable of more sophisticated behavior.
Grouping Field Sets on Dynamic Web Forms with the Ext JS Framework - Review: a simple online contact form with the Ext JS framework (Page 2 of 4 )
In case you haven’t had the chance to read the preceding article of the series, where I explained how to build a simple web form by using the Ext JS package, here's an opportunity to learn how to do this quickly. All that you need to do is examine the following example, which demonstrates the creation of an online contact form in a few easy steps:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
// 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);
});
</script>
</head>
<body>
<h1>Dynamic Form built with Ext JS library</h1>
</body>
</html>
As you can see from the above hands-on example, building a basic online contact form by means of the Ext JS framework is actually a comprehensive process. In this case, the web form is created dynamically after the complete web document has been loaded, thanks to the “FormPanel” JavaScript class included with the library.
Once an instance of this class has been created, constructing this primitive web form is only a matter of defining its most common attributes, such as the file that will process the user-supplied data, the corresponding title, and the text input fields that will be included into it.
At the end, the entire online form is displayed in the browser via the following line of code:
theform.render(document.body);
To complement the prior explanation, below I included a screen capture that shows pretty clearly the visual appearance of this sample web form:
So far, so good. At this point, you hopefully learned how to construct a dynamic online form with the Ext JS framework. So, what’s next? Well, as I mentioned in the beginning, this framework also allows you to build online forms that contain several field sets.
In the next section I’m going to discuss this topic in detail, so to learn more about it, please click the link that appears below and read the next few lines.
JavaScript 
Constructing a Multi-Column Online Form with the Ext JS Framework
