Constructing a Multi-Column Online Form with the Ext JS Framework - Building a multi-column web form
(Page 3 of 4 )
At the end of the previous section, I promised you that I was going to show you how to use the Ext JS library to build a multi-column web form, and that’s precisely what I’ll do in the next few lines.
As you’ll see in a moment, constructing this form requires working with an instance of the already familiar “FormPanel” JavaScript class. Its layout must be slightly tweaked so that it can accommodate different input boxes in a multi-column fashion.
Additionally, it's possible to incorporate an HTML editor into the form. Such an editor can be pretty useful, for instance, if you’re developing a web-based email application. But it’s time to set aside this boring theory and show some functional code, so here’s the JavaScript snippet that renders this multi-column web form:
Ext.onReady(function(){
Ext.QuickTips.init();
var theform=new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Multi Column, Nested Layouts and HTML editor',
bodyStyle:'padding:5px 5px 0',
width: 600,
items: [{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'htmleditor',
id:'bio',
fieldLabel:'Comments',
height:200,
anchor:'98%'
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
theform.render(document.body);
});
As you can see, the above example demonstrates how to create a multi-column web form by means of the “FormPanel” JavaScript class. In this case, a brand new parameter, called “layout,” is passed in to the class constructor to achieve the desired layout for the respective form elements.
Also, you should notice that this web form includes a text area box, not surprisingly labeled “Comments,” which comes in handy for letting users enter their comments or even, perhaps, composing email messages. However, the most interesting detail to stress here is the specification of an “xtype: ‘htmleditor” parameter.
This argument tells the Ext JS library to render a complete HTML editor for that specific comment box, similar to the one you use with your Yahoo! and Hotmail web-based accounts.
Do you realize that this package will build a neat HTML editor with a single line of code? You may want to tell this to Dreamweaver’s development team!
The following image should give you an idea of how this online form really looks.
Now that you have learned how to build a multi-column web form with the Ext JS library, it’s time to show the complete source for this web application, including the corresponding source dependencies and a bit of structural markup as well.
Please read the next section. It’s only one click away.
Next: Listing the application’s full source code >>
More JavaScript Articles
More By Alejandro Gervasio
