How to create a simple logon interface in ExtJs

First, check the image. 

2. Ext code on the logon page

Copy codeThe Code is as follows:
/// <Reference path = "http: // http://www.jb51.net/Resources/ExtJs/vswd-ext_2.0.2.js"/>
// Load the prompt box
Ext. QuickTips. init ();
// Create a namespace
Ext. namespace ('xqh. ExtJs. framework ');
// Main Application
XQH. ExtJs. Frame. app = function (){
}
Ext. extend (XQH. ExtJs. Frame. app, Ext. util. Observable ,{
LoginLogo: new Ext. Panel ({
Id: 'loginlogo ',
Height: 35,
Frame: true,
BodyStyle: 'padding-top: 4px ',
Html: '}),
// Login form
LoginForm: new Ext. form. FormPanel ({
Id: 'loginform ',
DefaultType: 'textfield ',
LabelAlign: 'right ',
LabelWidth: 60,
Frame: true,
Defaults:
{
AllowBlank: false
},
Items:
[
{
Name: 'loginname ',
FieldLabel: 'logon account ',
BlankText: 'account cannot be blank ',
EmptyText: 'required ',
Anchor: '000000'
},
{
Name: 'loginpsd ',
InputType: 'Password ',
FieldLabel: 'login password ',
BlankText: 'password cannot be blank ',
MaxLength: 10,
Anchor: '000000'
}
]
}),
// Login window
LoginWin: new Ext. Window ({
Id: 'loginwin ',
Title: 'login ',
Width: 250,
Height: 150,
Closable: false,
Collapsible: false,
Resizable: false,
Defaults :{
Border: false
},
ButtonAlign: 'center ',
Buttons :[
{Text: 'about '},
{Text: 'login '}
],
Layout: 'column ',
Items:
[
{
ColumnWidth: 1,
Items: Ext. getCmp ("loginLogo ")
},
{
ColumnWidth: 1,
Items: Ext. getCmp ("loginForm ")
}
]
}),
// Initialization
Init: function (){
This. LoginWin. show ();
}
});
// Program entry
Ext. onReady (function (){
Var loginFrame = new XQH. ExtJs. Frame. app ();
LoginFrame. init ();
});

Three experiences　
1. /// <reference path = "http://www.jb51.net/Resources/ExtJs/vswd-ext_2.0.2.js"/> This is the ext autoprompt function source file
2. Common ext interface la s include border, column, and fit. The detailed usage will be introduced later.
3. For ext usage, most of them are windows. The panel contains embedded content, such as formpanel (form ).
4. To understand {object config}, most ext configuration items are in this form. {Name: Value}, such as the button {text: 'l login '}
5. It is best to standardize the writing of ext code to reduce the error rate.
Approximate form:
Copy codeThe Code is as follows:
{
Id: ''(preferably)
Configuration information,
(If it is the outermost layer, do not forget to write layout, layout mode)
}

PS: You are welcome to add it.