Building Dynamic Web Forms with the Ext JS Framework - Listing the dynamic contact form's complete source code
(Page 4 of 4 )
As I stated in the previous section, below I listed the entire source code required to build a simple –- yet dynamic -- web form by using the API provided by the Ext JS library, including only basic markup.
The corresponding code sample is as follows:
<!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>Building Simple Dynamic Form with Ext JS</title>
<link rel="stylesheet" type="text/css" href="ext-all.css"/>
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<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">
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
// create simple dynamic form
var theform = new Ext.FormPanel({
labelWidth: 75,
url:'processform.php',
frame:true,
title: 'Simple Form built with Ext JS',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
// define form fields
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '9:00am',
maxValue: '5:00pm'
})
],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
// display the form
theform.render(document.body);
});
</script>
</head>
<body>
<h1>Dynamic Form built with Ext JS library</h1>
</body>
</html>
Now that you have at your disposal the complete source code that builds this basic online form with Ext JS, you shouldn’t have major problems understanding how it works. Of course, I can’t provide you with a functional example for creating this web form, since you must download the Ext JS package separately.
If you want to do this, please visit the Ext JS official web site at: http://extjs.com/.
Final thoughts
In this first installment of the series, I explained how to build a dynamic web form by using the capacity of the Ext JS library. As you saw previously, creating this web widget doesn’t require any additional markup, which can be a disadvantage if scripting is disabled on the browser.
However, this is the way that this library works, so I won’t be discussing here whether this is good or bad. Instead, let me tell you that in the next part, I’ll be discussing how to use this JavaScript package to create another dynamic web form that will include some useful field sets.
Don’t miss the next article!
| 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. |
