Grouping Field Sets on Dynamic Web Forms with the Ext JS Framework
(Page 1 of 4 )
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.
Introduction
Admittedly, building online forms is a fairly simple process that only requires some basic (X)HTML skills. It also calls for an intermediate background in JavaScript if some kind of client-side validation will be performed on the data entered by users.
Nonetheless, this peaceful and pleasant scenario can change dramatically when you need to create more complex, highly-dynamic web forms. For instance, suppose that you’re building a web-based email application that calls for working with multi-tabbed forms that must include a full-featured HTML editor.
That could be a really daunting task, even for an experienced web developer! Fortunately, there are a number of JavaScript frameworks available in the form of third-party libraries that can facilitate the development of sophisticated web forms.
In this case, I decided to take a close look at the popular Ext JS package, which is a robust JavaScript framework that permits you to build dynamic, professional-looking online forms with a simple combination of basic markup and object-oriented JavaScript code.
Of course, if you already read the first article of this series, you’ll be pretty familiar with creating web forms by using the Ext JS library. In that tutorial I demonstrated how to use the library to build a typical professional-looking contact form, which performed basic client-side validation on some of its pertinent input fields.
The functionality of the Ext JS package permits you to build much more complex web forms. So, in this second article of the series, I’m going to teach you how to utilize the Ext JS library to create a more sophisticated contact form, whose respective input boxes will be grouped into different field sets.
Besides this, the web form in question will provide users with the ability to alternately hide and display these field sets, in this manner increasing its overall functionality.
Now, it’s time to see how to build this online form by utilizing the Ext JS library. Let’s go!
Next: Review: a simple online contact form with the Ext JS framework >>
More JavaScript Articles
More By Alejandro Gervasio
/ 3 
