Home arrow JavaScript arrow Page 4 - Creating a Multi-Tabbed Online Form with the Ext JS Framework
JAVASCRIPT

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
February 18, 2009
TABLE OF CONTENTS:
  1. · Creating a Multi-Tabbed Online Form with the Ext JS Framework
  2. · Review: building a rich text format editor with the Ext JS library
  3. · Building a multi-tabbed online form
  4. · Completing the multi-tabbed web form

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
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.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 11 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials