更新时间:2022-09-18 12:29:17
现在开始我们来慢慢完善这个系统,今天做一个登录界面,此套系统已经开始慢慢加入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,如需转载请自行联系原作者