现在开始我们来慢慢完善这个系统，今天做一个登录界面，此套系统已经开始慢慢加入Java各种框架，或者后期我会自己定义合适的框架，让它可以完整的跑下来。
今天做的是用window包裹panel，panel再包裹tabpanel实现的：先来看看今天做的效果图：
login.jsp
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>登录-ExtJS4.2学习之路</
title
>
<
link
href
=
"../ExtJS4.2/resources/css/ext-all-neptune-rtl.css"
rel
=
"stylesheet"
>
<
link
href
=
"../ExtJS4.2/css/icon.css"
rel
=
"stylesheet"
>
<
script
src
=
"../ExtJS4.2/ext-all.js"
></
script
>
<
script
src
=
"../ExtJS4.2/locale/ext-lang-zh_CN.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"../demo/js/login.js"
></
script
>
<
style
type
=
"text/css"
>
.user{background: url(../ExtJS4.2/icons/user.png) no-repeat 2px 2px;}
.key{background: url(../ExtJS4.2/icons/key.png) no-repeat 2px 2px;}
.Userkey{background: url(../ExtJS4.2/icons/Userkey.png) no-repeat 2px 2px;}
.key,.user,.Userkey{
background-color: #FFFFFF;
padding-left: 20px;
font-size: 12px;
}
.bgimage {
background:url(../demo/image/logo.jpg ) no-repeat top;
position:absolute;
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"hello-tabs"
>
<!-- <img border="0" width="430" height="60" src="../demo/image/logo.jpg" /> -->
</
div
>
<
div
id
=
"aboutDiv"
class
=
"x-hidden"
style
=
'color: black; padding-left: 10px; padding-top: 10px; font-size: 12px'
>
思考者日记网ExtJs学习系统 v1.0<
br
/><
br
/>
2013-2014 思考者日记网|束洋洋个人博客（沪ICP备13005070）<
br
/><
br
/>
官方网站:<
a
href
=
"http://www.shuyangyang.com.cn"
target
=
"_blank"
>www.shuyangyang.com.cn</
a
>
</
div
>
</
body
>
</
html
>
|
其中自定义了一些CSS和自己加的DIV，为了实现上面的图片和tabpanel里的东西，再看看关键的login.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
Ext.onReady(
function
() {
var
userLoginPanel = Ext.create(
'Ext.panel.Panel'
, {
bodyCls:
'bgimage'
,
border :
false
,
defaults:{
margin:
'58 0'
},
items:{
xtype :
'tabpanel'
,
id :
'loginTabs'
,
activeTab : 0,
height : 180,
border :
false
,
items:[{
title :
"身份认证"
,
xtype :
'form'
,
id :
'loginForm'
,
defaults : {
width : 260,
margin:
'10 0 0 70'
},
// The fields
defaultType :
'textfield'
,
labelWidth : 40,
items: [{
fieldLabel:
'用户名'
,
cls :
'user'
,
name:
'username'
,
labelAlign:
'right'
,
labelWidth:65,
maxLength : 30,
emptyText:
'请在这里填写用户名'
,
maxLengthText :
'账号的最大长度为30个字符'
,
blankText:
"用户名不能为空，请填写！"
,
//错误提示信息，默认为This field is required!
allowBlank:
false
},{
fieldLabel:
'密 码'
,
cls :
'key'
,
name:
'password'
,
inputType:
"password"
,
labelWidth:65,
labelAlign:
'right'
,
emptyText:
'请在这里填写密码'
,
maxLengthText :
'密码长度不能超过20'
,
maxLength : 20,
blankText:
"密码不能为空，请填写！"
,
//错误提示信息，默认为This field is required!
allowBlank:
false
},{
xtype:
"combo"
,
fieldLabel:
'角 色'
,
cls :
'Userkey'
,
name:
'role'
,
labelAlign:
'right'
,
labelWidth:65,
store:[
"管理员"
,
"校领导"
,
"教职工"
],
//数据源为一数组
emptyText:
'请选择角色.'
,
blankText:
"请选择角色！"
,
//错误提示信息，默认为This field is required!
allowBlank:
false
}, {
id :
'id_reg_panel'
,
xtype :
'panel'
,
border :
false
,
hidden :
true
,
html :
'<br><span id='
messageTip
' style='
color:red
'> </span>'
}]
}, {
title :
'关于'
,
contentEl :
'aboutDiv'
,
defaults : {
width : 230
}
}]
}
});
Ext.create(
'Ext.window.Window'
, {
title :
'SHUYANGYANGExtJs学习系统'
,
width : 440,
height : 300,
layout:
'fit'
,
plain :
true
,
modal :
true
,
maximizable :
false
,
draggable :
false
,
closable :
false
,
resizable :
false
,
items: userLoginPanel,
// 重置 和 登录 按钮.
buttons: [{
text:
'重置'
,
iconCls :
'Wrench'
,
handler:
function
() {
Ext.Msg.alert(
'提示'
,
'重置！'
);
}
}, {
text:
'登录'
,
iconCls :
'User'
,
handler:
function
() {
Ext.Msg.wait(
"请等待"
,
"温馨提示"
, {
text:
'正在登录……'
});
}
}]
}).show();
});
|
这里大家可以自由发挥，加一些触发事件来实现与后台交互，这里我就不多写了，后续完善的时候我会写出来，因为现在静态要实现的太多了，慢慢来。看到不懂的属性或者地方，大家就去查API吧，相信学了这么久，这个你应该会的吧？
本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1570902，如需转载请自行联系原作者
