ExtJs4.0 login instance

[Javascript]
// JavaScript Document
// Load the prompt box
Ext. QuickTips. init ();
// Create a namespace
Ext. namespace ('ext. ExtJs. framework ');
// Main Application
Ext. ExtJs. Frame. app = function (){}
// Instantiate the program
Ext. extend (Ext. ExtJs. Frame. app, Ext. util. Observable ,{
// Program Header
AppTop: new Ext. Panel ({
Id: 'apptopid ', height: 35, frame: true, bodyStyle: 'padding-top: 4px', html: '}),
// Login form
AppMain: new Ext. form. FormPanel ({
Id: 'appmainid', defaultType: 'textfield ', labelAlign: 'right', labelWidth: 60, bodyStyle: 'text-align: center;', frame: true,
Defaults: {allowBlank: false },
Items: [{name: 'name', fieldLabel: 'logon account', blankText: 'account cannot be blank ', emptyText: 'required', anchor: '123 ', bodyStyle: 'margin-right: 10px ;'},
{Name: 'psd ', inputType: 'Password', fieldLabel: 'login password', blankText: 'password cannot be blank', maxLength: 10, anchor: '123'}]
}),
// Login window
AppWin: new Ext. Window ({width: 250, height: 150, closable: false, collapsible: false, resizable: false,
Ults: {border: false}, buttonAlign: 'center', buttons: [{text: 'about ', id: 'about'}, {text: 'login', id: 'login'}], layout: 'column ',
Items: [{columnWidth: 1, items: Ext. getCmp ("AppTopId") },{ columnWidth: 1, items: Ext. getCmp ("AppMainId")}]
}),
// Initialization
AppInit: function () {this. AppWin. show ();}
});
// Program entry
Ext. onReady (function (){
AppFrame = new Ext. ExtJs. Frame. app ();
AppFrame. AppInit ();
// Logon button event
Ext. get ('login '). on ('click', function () {Ext. msg. alert ('message', 'logon information... ');});
// About Button events
Ext. get ('about '). on ('click', function () {Ext. msg. alert ('message', 'about login loading .... ');});
});