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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Multicolumn Web Form with HTML editor</title>
<link rel="stylesheet" type="text/css" href="ext-all.css"/>
<link rel="stylesheet" type="text/css" href="forms.css"/>
<!-- common styles for the examples -->
<link rel="stylesheet" type="text/css" href="examples.css"/>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var theform=new Ext.FormPanel({
labelAlign: 'top',
frame:true,
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.
Next: Building a multi-tabbed online form >>
More JavaScript Articles
More By Alejandro Gervasio
/ 4 
