Constructing a Multi-Column Online Form with the Ext JS Framework - Listing the application’s full source code
(Page 4 of 4 )
As I said in the section that you just read, I’m finishing this tutorial by showing you the entire source code that displays this handy multi-column web form, including all of the CSS and JavaScript files required by the Ext JS library. 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>Multicolumn Web Form with HTML editor</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(){
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);
});
</script>
</head>
<body>
<h1>Multicolumn Web Form with HTML editor</h1>
</body>
</html>
Finally, if you wish to test all the code samples shown in this tutorial, don’t forget to download the Ext JS package from its official web site, located at: http://www.ext.js.com.
Final thoughts
In this third installment of the series, I walked you through the development of a full-featured multi-column web form, by using the JavaScript API provided by the Ext JS library. Hopefully, the whole experience has been pretty instructive and even fun.
In the upcoming part of this series, I’m going to teach you how to use the library to construct a multi-tabbed online form. So, now that you’ve been warned about the subject of the next tutorial, you won’t want to miss it!
| 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. |
