Constructing a Multi-Column Online Form with the Ext JS Framework - Review: building a field-set grouped web form using the Ext JS library
(Page 2 of 4 )
In the introduction, I explained the approach that I used in the previous tutorial to construct a sample online form whose respective input boxes were distributed in two separated field sets. I think it would be helpful to show the complete source code corresponding to this specific example, so you can recall more easily how it worked.
Having said that, here’s the definition of the (X)HTML file that renders this web form:
<!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>Simple Form with FieldSets</title>
<link rel="stylesheet" type="text/css" href="ext-all.css"/>
<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" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var fieldsetForm=new Ext.FormPanel({
labelWidth: 75,
url:'processform.php',
frame:true,
title: 'Simple Form with FieldSets',
bodyStyle:'padding:10px 10px 0',
width: 350,
items: [{
xtype:'fieldset',
checkboxToggle:true,
title: 'User Data',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
collapsed: true,
items :[{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}
]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(777) 555-1010'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Fax',
name: 'fax'
}
]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
// display dynamic web form
fieldsetForm.render(document.body);
});
</script>
</head>
<body>
<h1>Simple Form with two Field Sets</h1>
</body>
</html>
Now that you have had the chance to take a look at the above example, hopefully you’ll recall how simple it is to build a field set-grouped web form by utilizing the Ext JS library. Essentially, the entire creation process is reduced to spawning an instance of the its “FormPanel” class, and then feeding the class in question the appropriate incoming arguments to customize the visual appearance of the form. That’s all.
And speaking of visual appearance, below I included a simple screen capture, which certainly will give you a better idea of how this dynamic online form looks. Here it is:
Okay, at this point you hopefully recalled the complete details concerning the construction of a sample web form that’s composed of two field sets. Therefore, the next topic that I’m going to discuss will consist of demonstrating how to use the Ext JS package for creating a multi-column online form.
This form will include a neat HTML editor. To learn how it will be built, please click on the link that appears below and read the next section. I’ll be there, waiting for you.
Next: Building a multi-column web form >>
More JavaScript Articles
More By Alejandro Gervasio
