Grouping Field Sets on Dynamic Web Forms with the Ext JS Framework - The application’s full source code
(Page 4 of 4 )
As I expressed in the section that you just read, below I listed the complete source code that builds the previous dynamic web form, in this case embedded into a single (X)HTML file. 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>Simple Form with FieldSets</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(){
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',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}
]
},{
xtype:'fieldset',
title: 'Phone Number',
collapsible: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Home',
name: 'home',
value: '(777) 555-1010'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Fax',
name: 'fax'
}
]
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
// display dynamic web form comprised of two field sets
fieldsetForm.render(document.body);
});
</script>
</head>
<body>
<h1>Simple Form with two Field Sets</h1>
</body>
</html>
Here you have it. That’s all the source code that you need to build the dynamic web form shown in the previous section. Naturally, in this case I included all of the CSS and JavaScript dependencies bundled with the Ext JS package, so remember to download these additional files when testing this example on your own machine.
Final thoughts
In this second chapter of the series, I walked you through the development of a dynamic web form whose input boxes were neatly laid out by using two field sets. As you saw for yourself, this process was simplified by the excellent JavaScript API provided by the Ext JS library.
In the upcoming tutorial, I’ll show you how to use the Ext JS package to create a multi-column web form that will incorporate a full-featured HTML editor. Now that you know what the next tutorial will be about, you don’t have any excuses 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. |
/ 3 
