Simple login interface creation method in ExtJs_extjs

First, please see the picture

Second login interface Ext code

Copy Code The code is as follows:

///
//Load prompt box
Ext.QuickTips.init();
//Create namespace
Ext.namespace('XQH.ExtJs.Frame ');
//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:'

Backend 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: 'Login account',
blankText : 'Account cannot be empty',
emptyText:'required',
anchor: '98%'
},
{
name:'LoginPsd',
inputType: 'password',
fieldLabel: 'Login password',
blankText: 'Password cannot be blank',
maxLength:10,
anchor: '98%'
}
]
}),
//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 usage experience　
　1./// This sentence is the source file of the ext automatic prompt function
2. Commonly used ext interface layouts include border, column, and fit. The detailed usage will be introduced later
3. Regarding the use of ext, in fact, most of it is to embed the content you need in the window and panel, such as formpanel (form).
4. To understand {object config}, in fact, most ext configuration items are based on this form, {name: value}, such as button {text: 'l login'}
5. Write ext code It is best to standardize, which can reduce the error rate.
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ID: '', (It is best to write it)
Configuration information,

(If it is the outermost layer, don’t forget to write layout, layout mode) PS: Welcome Please add something to make it interesting.