Home arrow JavaScript arrow Grouping Field Sets on Dynamic Web Forms with the Ext JS Framework

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 9
February 03, 2009
  1. · Grouping Field Sets on Dynamic Web Forms with the Ext JS Framework
  2. · Review: a simple online contact form with the Ext JS framework
  3. · Building a field set-grouped online form with the Ext JS library
  4. · The applicationís full source code

print this article

Grouping Field Sets on Dynamic Web Forms with the Ext JS Framework
(Page 1 of 4 )


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!

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials