ExtJs-简单的登录界面制作
前言：接触Ext也有好几个月了，但是由于时间问题，都没有好好总结一下，现在抽空再博客里回顾下Ext使用心得，欢迎各位指点。
一 首先请看图片
二 登陆界面Ext代码
代码
1
//
/ <reference path="http://www.cnblogs.com/Resources/ExtJs/vswd-ext_2.0.2.js" />
2
3
//
加载提示框
4
Ext.QuickTips.init();
5
6
//
创建命名空间
7
Ext.namespace(
'
XQH.ExtJs.Frame
'
);
8
9
//
主应用程序
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:
'
<h3><center>后台Ext框架</center></h3>
'
21
}),
22
23
//
登陆表单
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:
'
登陆账号
'
,
39
blankText:
'
账号不能为空
'
,
40
emptyText:
'
必填
'
,
41
anchor:
'
98%
'
42
},
43
{
44
name:
'
LoginPsd
'
,
45
inputType:
'
password
'
,
46
fieldLabel:
'
登陆密码
'
,
47
blankText:
'
密码不能为空
'
,
48
maxLength:
10
,
49
anchor:
'
98%
'
50
}
51
]
52
}),
53
54
//
登陆窗口
55
LoginWin:
new
Ext.Window({
56
id:
'
loginWin
'
,
57
Title:
'
登陆
'
,
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:
'
关于
'
},
69
{ text:
'
登陆
'
}
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
//
初始化
87
init:
function
() {
88
this
.LoginWin.show();
89
}
90
});
91
92
//
程序入口
93
Ext.onReady(
function
() {
94
var
loginFrame
=
new
XQH.ExtJs.Frame.app();
95
loginFrame.init();
96
});
97
三 使用心得
1./// <reference path="http://www.cnblogs.com/Resources/ExtJs/vswd-ext_2.0.2.js" />这句为ext自动提示功能源文件
2.关于ext界面布局常用的有border,column,fit这几种，详细用法以后再作介绍
3.关于ext使用，其实大部分就是window,panel里面镶嵌自己需要的内容，如formpanel(表单)。
4.要理解{object config},其实大部分ext配置项都是基于这种形式的，{名称:值},如按钮{text:'l登陆'}
5.书写ext代码最好规范化,这样可以减少出错率。
大概形式：
{
id:'',(最好写上)
配置信息,
(如果是最外层的别忘了写layout，布局模式)
}
PS：欢迎大家补充，提意思。