Creating a Multi-Tabbed Online Form with the Ext JS Framework
If you know how much time and effort JavaScript libraries can save you when it comes to coding complex web forms, and are interested in the Ext JS library, then welcome to the fourth installment of a series that focuses on building dynamic web forms with the Ext JS framework. Made up of five approachable tutorials, this series shows you how to construct different kinds of interactive online forms by using the powerful JavaScript API provided by the popular Ext JS package.
Creating a Multi-Tabbed Online Form with the Ext JS Framework - Review: building a rich text format editor with the Ext JS library (Page 2 of 4 )
Before I demonstrate how to construct a professional-looking multi-tabbed web form with the Ext JS library, I’d like to reintroduce the last hands-on example developed in the preceding tutorial of the series. It was aimed at illustrating how to utilize this software to build a multi-column online form.
Please take a look at the following code sample, which shows how to construct the form in question:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
title: 'Multi Column, Nested Layouts and HTML editor',
bodyStyle:'padding:5px 5px 0',
width: 600,
items: [{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'htmleditor',
id:'bio',
fieldLabel:'Comments',
height:200,
anchor:'98%'
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
theform.render(document.body);
});
</script>
</head>
<body>
<h1>Multicolumn Web Form with HTML editor</h1>
</body>
</html>
Hopefully, after studying the previous practical example in detail, you’ll have to agree with me that creating a multi-column web form by way of the Ext JS library is indeed a straightforward process! In this case, the online form in question is constructed by creating an instance of the handy “FormPanel” JavaScript class, and then feeding it the appropriate input arguments. That’s all.
In addition, there’s a specific detail that’s worth looking at: the aforementioned class takes up an “xtype:‘htmleditor’ parameter, which in this case is used to incorporate a useful HTML editor into the comment box of the form in question. Not too difficult to grasp, right?
Finally, you’ll have a clearer idea of how this multi-column web form looks, if you examine the following image:
So far, so good. At this moment, you hopefully recalled how to construct a dynamic online form with the Ext JS library in a few easy steps. So, what comes next? Well, as I mentioned in the beginning, it’s also possible to use this library to build a multi-tabbed web form with minor efforts.
Therefore, in the next section I’ll be discussing this process in detail, so if you’re interested in learning more, please click on the link that appears below and keep reading.
JavaScript 
Constructing a Multi-Column Online Form with the Ext JS Framework
