JAVASCRIPT

Constructing a Multi-Column Online Form with the Ext JS Framework

Welcome to the third article in a series that shows you how to build dynamic web forms with the Ext JS framework. This series walks you through the development of different dynamic online forms using the Ext JS package, so you can start including them in your own web sites.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

February 10, 2009

TABLE OF CONTENTS:

In the introduction, I explained the approach that I used in the previous tutorial to construct a sample online form whose respective input boxes were distributed in two separated field sets. I think it would be helpful to show the complete source code corresponding to this specific example, so you can recall more easily how it worked.

Having said that, here’s the definition of the (X)HTML file that renders this web form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Simple Form with FieldSets</title>

Ext.onReady(function(){

var fieldsetForm=new Ext.FormPanel({

labelWidth: 75,

url:'processform.php',

frame:true,

title: 'Simple Form with FieldSets',

bodyStyle:'padding:10px 10px 0',

width: 350,

items: [{

xtype:'fieldset',

checkboxToggle:true,

title: 'User Data',

autoHeight:true,

defaults: {width: 210},

defaultType: 'textfield',

collapsed: true,

items :[{

fieldLabel: 'First Name',

allowBlank:false

},{

fieldLabel: 'Last Name',

},{

fieldLabel: 'Company',

}, {

fieldLabel: 'Email',

vtype:'email'

}

]

},{

xtype:'fieldset',

title: 'Phone Number',

collapsible: true,

autoHeight:true,

defaults: {width: 210},

defaultType: 'textfield',

items :[{

fieldLabel: 'Home',

value: '(777) 555-1010'

},{

fieldLabel: 'Business',

},{

fieldLabel: 'Fax',

}

]

}],

buttons: [{

text: 'Save'

},{

text: 'Cancel'

}]

});

// display dynamic web form

fieldsetForm.render(document.body);

});

</script>

</head>

<body>

<h1>Simple Form with two Field Sets</h1>

</body>

</html>

Now that you have had the chance to take a look at the above example, hopefully you’ll recall how simple it is to build a field set-grouped web form by utilizing the Ext JS library. Essentially, the entire creation process is reduced to spawning an instance of the its “FormPanel” class, and then feeding the class in question the appropriate incoming arguments to customize the visual appearance of the form. That’s all.

And speaking of visual appearance, below I included a simple screen capture, which certainly will give you a better idea of how this dynamic online form looks. Here it is:

Okay, at this point you hopefully recalled the complete details concerning the construction of a sample web form that’s composed of two field sets. Therefore, the next topic that I’m going to discuss will consist of demonstrating how to use the Ext JS package for creating a multi-column online form.

This form will include a neat HTML editor. To learn how it will be built, please click on the link that appears below and read the next section. I’ll be there, waiting for you.

Next: Building a multi-column web form >>