您的位置：首页 > 其它

Ext综合应用1--登陆篇

2010-04-15 16:11 183 查看

效果图：

使用Ext来登陆的javascript

/*
*	创建登陆窗体
*  param String ctx  工程路径
*/
function createLoginWin(ctx){
Ext.QuickTips.init();
//创建表单
var myform=new Ext.form.FormPanel({
bodyStyle:"padding-top:30px;padding-left:42px",
frame:true,
region:"center",
width:"100%",
labelAlign:"right",
defaultType:"textfield",
defaults:{allowBlank:false},
items:[
//添加表单控件，一个文本框,密码框,验证码框
{cls:"user",name:"username", fieldLabel:"帐   号", blankText:"帐号不能为空"},
{cls:"key",name:"password", fieldLabel:"密   码", blankText:"密码不能为空", inputType:"password"},
{cls:"rand",name:"code", id:"code", fieldLabel:"验证码", width:90, blankText:"验证码不能为空"}
]
});

//创建Ext窗体
var win=new Ext.Window({
layout:"border",
title:"AMSS登陆",
width:400,
height:250,
collapsible:true,
items: [myform]//将表单放置在窗体上
});

//登陆按扭定义的事件，当点登陆将触发该事件
login=function(){
if(Ext.getDom("username").value==''){
Ext.MessageBox.alert("警告", "帐号信息不允许为空，无法登陆！");
return;
}
if(Ext.getDom("password").value==''){
Ext.MessageBox.alert("警告", "密码信息不允许为空，无法登陆！");
return;
}
if(Ext.getDom("code").value==''){
Ext.MessageBox.alert("警告", "验证码信息不允许为空，无法登陆！");
return;
}
myform.form.submit({//表单提交
waitMsg:"正在登陆......",
url:ctx+"/login.do",
success:function (form, action) {
//登陆成功，显示数据载入条
Ext.MessageBox.show({
title: '登陆成功',
msg: '数据载入中...',
width:300,
progress:true,
closable:false
});
window.location= ctx+"/manager/main.jsp";
},
failure:function (form, action) {
form.reset();//登陆失败表单重置
Ext.MessageBox.alert("警告", action.result.info);
//登陆失败也更换下验证码
document.getElementById('des1').src="code.jsp?code="+Math.random();
}
});
};

myform.addButton("登陆",login);//按扭添加监听事件
myform.addButton("重置",function(){myform.form.reset()});//添加表单重置事件

win.show();//窗体显示
var Code = Ext.getDom("code");
var CodeNode = Ext.get(Code.parentNode);
//创建验证码区域
CodeNode.createChild({
id:"des1",
tag:"img",
src:ctx+"/code.jsp",
align:"absbottom",
style:"cursor: hand",
qtip:"点击重新获得验证码。"
});

//设置验证码图片点击时更换验证码
Ext.get('des1').on('click', function(e){
document.getElementById('des1').src=ctx+"/code.jsp?code="+Math.random();
});

}

在登陆的jsp页面负责调用javascript中定义的封装函数

<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>AMSS系统管理登陆</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="<%=path %>/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="<%=path %>/css/login.css" />
<script type="text/javascript" src="<%=path %>/ext/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="<%=path %>/ext/ext-all.js">
</script>
<script type="text/javascript" src="<%=path %>/ext/loginsso.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
createLoginWin('<%=path%>');
});

</script>
</head>

<body bgcolor="#DFE8F6">
</body>
</html>

css如下，图片自己找好了

.user{
background:url(../images/user.gif) no-repeat 1px 2px;
}
.key{
background:url(../images/key.gif) no-repeat 1px 2px;
}
.rand{
background:url(../images/rand.gif) no-repeat 1px 2px;
}
.key,.user,.rand{
background-color:#FFFFFF;
padding-left:20px;
font-weight:bold;
color:#000033;
}
.mycon{
background:url(../images/ico_04.gif) 0 6px no-repeat !important;
}

验证码的jsp就不提供了，随便一搜一大把

下章将发Ext树代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航