Page 4 - Building an RTF-capable Form with the Ext JS Framework

JAVASCRIPT

Building an RTF-capable Form with the Ext JS Framework

If you’re a web developer who’s looking for a JavaScript framework that permits you to build dynamic, highly-interactive web forms in a quick and painless way, then look no further, because this group of articles might be what you really need. Welcome to the final part of a five-part series on building dynamic web forms with the Ext JS framework. This series shows you how to take advantage of the powerful JavaScript API provided by the Ext JS library to construct all sorts of professional-looking online forms, without having to deal with the usual complexities of working with large DHTML applications.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 6

February 25, 2009

TABLE OF CONTENTS:

See Also:

print this article

SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement

Building an RTF-capable Form with the Ext JS Framework - The application’s complete source code
(Page 4 of 4 )

As I stated in the section that you just read, below I listed for you the complete source code that renders the multi-tabbed online form, taking into account that you may be interested in playing around with it. Here you have it:

<!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 and HTML editor</title>

<link rel="stylesheet" type="text/css" href="ext-all.css"/>

<link rel="stylesheet" type="text/css" href="forms.css"/>

<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',

title: 'Inner Tabs',

bodyStyle:'padding:5px',

width: 600,

items: [{

layout:'column',

border:false,

items:[{

columnWidth:.5,

layout: 'form',

border:false,

items: [{

xtype:'textfield',

fieldLabel: 'First Name',

name: 'first',

anchor:'95%'

}, {

xtype:'textfield',

fieldLabel: 'Company',

name: 'company',

anchor:'95%'

}]

},{

columnWidth:.5,

layout: 'form',

border:false,

items: [{

xtype:'textfield',

fieldLabel: 'Last Name',

name: 'last',

anchor:'95%'

},{

xtype:'textfield',

fieldLabel: 'Email',

name: 'email',

vtype:'email',

anchor:'95%'

}]

}]

},{

xtype:'tabpanel',

plain:true,

activeTab: 0,

height:235,

defaults:{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'

}]

},{

cls:'x-plain',

title:'Comments',

layout:'fit',

items: {

xtype:'htmleditor',

id:'bio2',

fieldLabel:'Comments'

}

}]

}],

buttons: [{

text: 'Save'

},{

text: 'Cancel'

}]

});

// display the form

theform.render(document.body);

});

</script>

</head>

<body>

<h1>Form with Tabbed Panels and HTML editor</h1>

</body>

</html>

Finally, don’t forget to download the Ext JS library from its official web site, by typing into your browser’s address field the following URL: http://www.extjs.com. I hope you enjoy building your own dynamic web forms as much as I did creating mine!

Final thoughts

It’s hard to believe, but we’ve come to the end of this series. At this point, hopefully you’ve realized how simple it is to build full-featured online forms by way of the Ext JS framework, since all of the hard work to do this is performed behind the scenes.

If you’re looking for a robust package that allows you to construct professional web form in minutes, without having to be a JavaScript guru, then Ext JS might be the software that you really need.

See you in the next web development tutorial!

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

Find More JavaScript Tutorials

Dev Articles Forums

Weekly Newsletter
Developer Updates
Free Website Content

Privacy Policy
Support

© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 8 - Follow our Sitemap

Popular Web Development Topics

All Web Development Tutorials

Download a FREE trial and enter to win FREE software licenses.