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:

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>

<title>Form with Tabbed Panels</title>

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

allowBlank:false,

value: 'Alejandro'

},{

fieldLabel: 'Last Name',

value: 'Gervasio'

},{

fieldLabel: 'Company',

value: 'Electrical Web'

}, {

fieldLabel: 'Email',

vtype:'email'

}]

},{

title:'Phone Numbers',

layout:'form',

defaults: {width: 230},

defaultType: 'textfield',

items: [{

fieldLabel: 'Home',

value: '(777) 555-1010'

},{

fieldLabel: 'Business',

},{

fieldLabel: '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 >>