Creating a Multi-Tabbed Online Form with the Ext JS Framework

As I mentioned before, the Ext JS library permits you to build a multi-tabbed web form in a relatively easy manner. Of course, as you might have guessed, constructing this specific kind of online form requires using an instance of the “FormPanel” JavaScript class that you learned in previous examples, in conjunction with a few additional input parameters.

But it’s time to leave these theoretical concepts and show some functional code, right? Below I included the complete JavaScript code required to build this multi-tabbed online form. Take a close look at it, please:

Ext.onReady(function(){

var theform=new Ext.FormPanel({

labelWidth: 75,

border:false,

width: 350,

items: {

xtype:'tabpanel',

activeTab: 0,

defaults:{autoHeight:true, bodyStyle:'padding:10px'},

items:[{

title:'Personal Information',

layout:'form',

defaults: {width: 230},

defaultType: 'textfield',

items: [{

fieldLabel: 'First Name',

name: 'first',

allowBlank:false,

value: 'Alejandro'

},{

fieldLabel: 'Last Name',

name: 'last',

value: 'Gervasio'

},{

fieldLabel: 'Company',

name: 'company',

value: 'Electrical Web'

}, {

fieldLabel: 'Email',

name: 'email',

vtype:'email'

}]

},{

title:'Phone Numbers',

layout:'form',

defaults: {width: 230},

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 the form

theform.render(document.body);

});

Didn’t I tell you that creating a multi-column web form with the Ext JS library was a simple process? And if you carefully examine the above example, you’ll realize that I was right! As you can see, I used the “FormPanel” class to construct the form in question.

Apart from passing to the class constructor a bunch of parameters that determine the number of input boxes that must be included in the online form, its title, width, etc., I’d like you to pay close attention to the following argument, since it’s the one that really tells the class to construct a multi-tabbed layout:

xtype:'tabpanel'

As you can see, this simple parameter indicates to the “FormPanel” class that it should create a multi-tabbed web form, which in this case will contain some input text boxes for entering some typical information, such as the user’s first and last names, the corresponding email address, and finally several phone numbers.

Of course, the previous example is rather insufficient on its own to demonstrate the visual appearance of this dynamic form. Below I included another screen capture that depicts it pretty clearly:

Now you've learned how to utilize the Ext JS package to construct a cool multi-tabbed online form. The previous JavaScript code in its current version is actually rather incomplete, however, since it must be embedded into an (X)HTML file.

Therefore, I’m going to dedicate the last section of this tutorial to showing you the complete source code necessary to build the multi-tabbed web form that you saw previously.

Click on the link below and read the next few lines. We’re almost finished!