Creating a Multi-Tabbed Online Form with the Ext JS Framework - Completing the multi-tabbed web form
(Page 4 of 4 )
As I stated in the course of the prior section, below you have available the entire source code that will construct the multi-tabbed web form discussed previously, including all of the CSS and JavaScript dependencies. Here it is:
<!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>
Before you read the conclusion to this article, don’t forget that the Ext JS package must be downloaded separately, so if you’re planning to try out this example or one that was developed earlier, please point your browser to the Ext JS official web site, located at: http://www.extjs.com. Happy coding!
Final thoughts
Sad but true, we’ve come to the end of this fourth part of the series. You learned how to use the Ext JS library to build a professional-looking web form, without the need to deal directly with the complexities of a DHTML application, or even write a single line of CSS code.
In the final episode of the series, I’m going to teach you how to combine the multi-tabbed layout that you learned before with a handy HTML editor, all in one single web form. Don’t miss the last part!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 4 
