Ext JS: Create A Basic Login 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.
Forward: If you haven’t heard of the amazing JavaScript framework named ExtJS yet, well, just have a look at the main site which will tell you all about the library and what it’s used for…or you can see exactly what it does with these examples and demonstrations, which will be a bit quicker. Either way, bottom-line, it’s an amazing JavaScript framework which, in my opinion, deserves way more attention.
Simple Example: Using ExtJS, we are going to spruce-up our user login form.
I am assuming you have Ext installed into a folder just before the one we are in (../), so please change it to match your install structure.
Here is the basic HTML for the login form. (index.html)
index.html
<!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=”login.js”></script>
</head>
<body>
<div id=”login_form”></div>
</body>
</html>
We now have an empty div element with the id of login_form in our page with all of the required Ext library files loaded as well.
Now, we’re ready to begin creating the form. This will all happen in our login.js file.
login.js
Ext.onReady(function(){
var loginForm = new Ext.FormPanel({
labelWidth: 125,
frame: true,
title: ‘User Login’,
bodyStyle:’padding:5px 5px 0′,
width: 350,
defaults: {
width: 175,
inputType: ‘password’
},
defaultType: ‘textfield’,
items: [{
inputType: 'textfield',
fieldLabel: 'User Name',
name: 'user',
id: 'user'
},{
fieldLabel: 'Password',
name: 'pass',
id: 'pass'
}],
buttons: [{
text: 'Login'
},{
text: 'Cancel'
}]
});
loginForm.render(’login_form’);
});
And now, we have our form:
With the Ext JS framework, tasks as easy as retrieving a div element by id to creating advanced desktop-like applications, are possible. In the coming weeks I’ll be releasing a few more Ext JS tutorials, some of which will be adding to this login form and making it work with a server-side language (PHP) and a database server (mySQL). Until then, happy coding.
You may view this examples source files here: index.html & login.js
References:
Ext JS API Documentation, Ext, Ext.Component, Ext.form.FormPanel
Leave a Reply
You must be logged in to post a comment.
