Building an RTF-capable Form with the Ext JS Framework - Review: a multi-tabbed web form with the Ext JS framework
(Page 2 of 4 )
Since my intention here is to teach you how to build a multi-tabbed online form that will include an HTML editor, I believe it's useful to recall very quickly the example created in the last tutorial. It demonstrated in a simple fashion how to build this same kind of online form, but without incorporating the HTML editing capabilities.
Having said that, please take a look at the following hands-on example. It is responsible for constructing an appealing, multi-tabbed web form. Here’s the example 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>Form with Tabbed Panels</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(){
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);
});
</script>
</head>
<body>
<h1>Form with Tabbed Panels</h1>
</body>
</html>
Okay, now that I've listed the complete source code required for building a multi-tabbed online form using the Ext JS library, I should assume that this process is already familiar to you, right? Anyway, in case you’re suffering from amnesia, let me explain to you quickly how the previous example does its thing.
As you can see, the entire online form is constructed by using the “FormPanel” JavaScript class, which takes up a certain number of incoming arguments for customizing the visual appearance of the form. However, among the parameters accepted by the class, there’s one that has special relevance, listed below:
xtype:'tabpanel'
Essentially, this single argument instructs the “FormPanel” class to render a tabbed panel, which obviously will be used to accommodate the different text input boxes of the form being constructed. Not too hard to grasp, right?
In addition, you may want to take a look at the following image, which depicts the visual appearance of this web form:
Well, now that you hopefully recalled how to use the Ext JS library to build a neat multi-tabbed online form, it’s time to see how to extend the functionality of the form by adding a decent HTML editor to it.
Sounds pretty interesting, right? However, to learn the full details of how this will be done, you’ll have to click on the link below and keep reading.
Next: Adding an HTML editor to a multi-tabbed web form >>
More JavaScript Articles
More By Alejandro Gervasio
