Ext JS: Adding Functionality To Your Form
Note: This tutorial, and Ext JS in-general, is aimed at intermediate to advanced web developers. If you are amateur with JavaScript or would like to know more about the Ext JS framework I’m sure they won’t mind you browsing by their place.
Simple Example: Using ExtJS, we’re going to add functionality to our login form, which we originally made in Ext JS: Create A Basic Login Form.
As before, I am assuming you have Ext installed into a folder just before the one we are in (../), so please update the files below accordingly.
We want our form to do some auto-checking to make sure the fields are not blank upon submission.
Here is the basic HTML for our form:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Login Form Example</title>
<!-– link/load required Ext library files -–>
<link rel=”stylesheet” type=”text/css” href=”../ext/resources/css/ext-all.css” />
<script type=”text/javascript” src=”../ext/adapter/ext/ext-base.js”></script>
<script type=”text/javascript” src=”../ext/ext-all.js”></script>
<script type=”text/javascript” src=”login2.js”></script>
</head>
<body>
<div id=”login_form”></div>
</body>
</html>
As you can see, the HTML hasn’t changed at all compared to the original login forms HTML, except for the location of our linked script file, of course.
Now, for the fun stuff! Let’s set the options for it to check that all fields are not blank:
login2.js
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = ’side’;
var loginForm = new Ext.FormPanel({
labelWidth: 125,
frame: true,
title: ‘User Login’,
bodyStyle:’padding:5px 5px 0′,
width: 350,
monitorValid: true,
items: [{
inputType: 'textfield',
fieldLabel: 'User Name',
name: 'user',
id: 'user',
allowBlank: false
},{
inputType: 'password',
fieldLabel: 'Password',
name: 'pass',
id: 'pass',
allowBlank: false
}],
buttons: [{
text: 'Login'
},{
text: 'Cancel'
}]
});
loginForm.render(’login_form’);
});
*Compared to the first basic form example, the new code/lines are in bold.
Thus, giving us our new functional-ish form:
References:
Ext JS API Documentation, Ext, Ext.Component, Ext.form.FormPanel, Ext.form.Field, Ext.QuickTips
Leave a Reply
You must be logged in to post a comment.
