Extjs-simple login interface creation

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

　　

Code

 1 // <Reference Path = "http://www.cnblogs.com/Resources/ExtJs/vswd-ext_2.0.2.js"/>
2
3 // load the prompt box
4 Ext. quicktips. INIT ();
5
6 // create a namespace
7 Ext. namespace ('xqh. extjs. framework ');
8
9 // Main Application
10 xqh. extjs. Frame. APP = function (){
11}
12
13 Ext. Extend (xqh. extjs. Frame. app, ext. util. observable ,{
14
15 loginlogo: New Ext. Panel ({
16 ID: 'loginlogo ',
17 Height: 35,
18 frame: True,
19 bodystyle: 'padding-top: 4px ',
20 HTML: '21 }),
22
23 // login form
24 loginform: New Ext. Form. formpanel ({
25 ID: 'loginform ',
26 defaulttype: 'textfield ',
27 labelalign: 'right ',
28 labelwidth: 60,
29 frame: True,
30 defaults:
31 {
32 allowblank: false
33 },
34 items:
35 [
36 {
37 Name: 'loginname ',
38 fieldlabel: 'logon account ',
39. blanktext: 'account cannot be blank ',
40 emptytext: 'mandatory ',
41 anchor: '123'
42 },
43 {
44 name: 'loginpsd ',
45 inputtype: 'Password ',
46 fieldlabel: 'login password ',
47. blanktext: 'The password cannot be blank ',
48 maxlength: 10,
49 anchor: '123'
50}
51]
52 }),
53
54 // login window
55 loginwin: New Ext. Window ({
56 ID: 'loginwin ',
57 title: 'login ',
58 width: 250,
59 Height: 150,
60 closable: false,
61 collapsible: false,
62 resizable: false,
63 defaults :{
64 border: false
65 },
66 buttonalign: 'center ',
67 buttons :[
68 {text: 'about '},
69 {text: 'login '}
70],
71 layout: 'column ',
72 items:
73 [
74 {
75 columnwidth: 1,
76 items: Ext. getcmp ("loginlogo ")
77
78 },
79 {
80 columnwidth: 1,
81 Items: Ext. getcmp ("loginform ")
82}
83]
84 }),
85
86 // Initialization
87 init: function (){
88 this. loginwin. Show ();
89}
90 });
91
92 // program entry
93 Ext. onready (function (){
94 var loginframe = new xqh. extjs. Frame. app ();
95 loginframe. INIT ();
96 });
97

 

 

Three experiences

1. /// <Reference Path = "http://www.cnblogs.com/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:

{

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.