Grouping Field Sets on Dynamic Web Forms with the Ext JS Framework - Building a field set-grouped online form with the Ext JS library
(Page 3 of 4 )
To be frank, building a web form comprised of several field sets is a process that doesn’t differ too much from creating a simple one. Basically, the procedure is reduced to creating an instance of the “FormPanel” JavaScript class that you learned previously, and then feeding its constructor the appropriate input parameters.
In this case, I’m going to build a sample online form that will be composed of only two field sets. The first one will be used to group some typical input boxes, including the user’s first and last names, the corresponding email address and the company for which he or she works, while the second field set will be utilized to enter several phone numbers, allowing you to collect user data in a more organized way.
Now that I have explained how this web form will be laid out, here’s the complete JavaScript code responsible for building it:
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 form
fieldsetForm.render(document.body);
});
As I mentioned earlier, the previous web form is constructed by using an instance of the “FormPanel” JavaScript class, whose constructor is fed a certain number of items for building the different input boxes, in this case grouped into two distinct field sets.
Once the online form has been created, it’s directly outputted to the browser by using the following line of code:
fieldsetForm.render(document.body);
Of course, the previous hands-on example would be rather insufficient if I didn't provide you with a complementary image that gives you a clear idea of how this sample web form looks, so here it is:
As you can see, the above web form groups its different input boxes into two field sets, which can be hidden and displayed alternately as a user fills in the pertinent fields. Pretty good, right?
Well, at this stage you hopefully grasped the logic that stands behind building a field set-grouped web form with the Ext JS library. Therefore, in the following section I’m going to list for you the complete source code that constructs this dynamic online form, accompanied by some basic structural markup.
Want to see how this will be done? Click on the link that appears below and keep reading.
Next: The application’s full source code >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
