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">
<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"/>
<script type="text/javascript">
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);
});
</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.
Next: Building a field set-grouped online form with the Ext JS library >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
