Ext综合应用1--登陆篇

来源：互联网发布：淘宝直通车如何收费编辑：程序博客网时间：2024/06/05 13:27

效果图：

使用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树代码