How to create a simple logon interface in ExtJs _ extjs

I have been in touch with Ext for several months, but I have not summarized it due to time issues. Now I will go back to my blog to review my experiences with Ext. Thank you for your advice. First, check the image.

2. Ext code on the logon page

The Code is as follows:

///
// 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 :'

Background Ext framework '
}),
// 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 ./// This is the ext automatic prompt 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:

The 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.