Home arrow JavaScript arrow Page 3 - Building Dynamic Web Forms with the Ext JS Framework
JAVASCRIPT

Building Dynamic Web Forms with the Ext JS Framework


If you do any programming in JavaScript for the web, you've probably heard about a number of third-party libraries that can make your life a lot easier. This five-part series will introduce you to Ext JS, one of the more versatile frameworks. You'll be amazed at how much you can accomplish with it.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
January 27, 2009
TABLE OF CONTENTS:
  1. · Building Dynamic Web Forms with the Ext JS Framework
  2. · Building a simple contact form
  3. · Building a dynamic contact web form
  4. · Listing the dynamic contact form's complete source code

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Building Dynamic Web Forms with the Ext JS Framework - Building a dynamic contact web form
(Page 3 of 4 )

In the previous section, I coded a basic (X)HTML file which downloads all of the dependencies required by the Ext JS library to build a basic –- yet dynamic – web form.

However, at this point I haven’t shown you how to create the form. Here is the sequence of steps necessary to accomplish this process successfully and with minor hassles: first, the web form must be constructed after the whole web page has been loaded, and then it must be supplied with the appropriate set of incoming parameters. These parameters will be used to create the corresponding input text boxes, the set of validation rules, and the control buttons that must be provided to users.

Based on this initial schema, the following JavaScript code performs all of the tasks required to build a contact web form like the one described above. Pay close attention to it, please:


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);

});


Despite the apparent complexity of the above JavaScript snippet, it’s pretty easy to understand what it does, so let me dissect it for you. First, you can see that all of the code utilized to build the sample contact form has been wrapped into one method included with the Ext JS library, called “onReady().”

We did this simply to make sure that the web form will be constructed after the complete web page has been properly downloaded and displayed. Are you still with me?

All right, now it’s time to focus on the part of the code that actually renders the form. In this case, a brand new class is used to achieve this task, which is called, not surprisingly, “FormPanel.” Obviously, this class accepts a certain number of parameters for defining specific aspects of the web form, such as its submission URL and title, its default width, and so forth.

In addition, the respective input fields of the dynamic contact form are constructed via an array of items that permits you to specify pretty easily their names and labels, and whether or not they will be required.

And finally, the web form is displayed on the browser by using the “render()” method, as indicated by the following line of JavaScript code:


theform.render(document.body);


Well, at this stage you've hopefully learned how to build a simple web form by using the API provided by the Ext JS package. Nonetheless, if you’re anything like me, then you may want to see how this dynamic online form looks. Therefore, I included a screen shot below that shows the visual appearance of the web form in question.

Here it is:


Now that you've taken a close look at the above image, you should have a pretty good idea of how useful the Ext JS package can be when you're building professional-looking web forms.

Nevertheless, I have to admit that the JavaScript code that you learned before  looks disarticulated when analyzed in isolated sections, since it must be integrated with the corresponding structural markup.

Thus, with that idea in mind, in the last section of this initial tutorial of the series, I’m going to list the complete source code required to build a simple contact web form. This way you'll have it available all in one place, in case you want to copy it and paste it into your code editor.

To see the full source code that renders the previous dynamic web form, please click on the link below and keep reading.


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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