extjs 含有验证码的登陆窗口

Js代码:

Ext.QuickTips.init();

LoginWindow=Ext.extend(Ext.Window,{

title : '登陆系统',

width : 265,

height : 170,

collapsible : true,

defaults : {

border : false

},

buttonAlign : 'center',

createFormPanel :function() {

return new Ext.form.FormPanel( {

bodyStyle : 'padding-top:6px',

defaultType : 'textfield',

labelAlign : 'right',

labelWidth : 55,

labelPad : 0,

frame : true,

defaults : {

allowBlank : false,

width : 158

},

items : [{

cls : 'user',

name : 'username',

fieldLabel : '帐号',

blankText : '帐号不能为空'

}, {

cls : 'key',

name : 'password',

fieldLabel : '密码',

blankText : '密码不能为空',

inputType : 'password'

}, {

cls : 'key',

name:'randCode',

id:'randCode',

fieldLabel:'验证码',

width:80,

blankText : '验证码不能为空'

}]

});

},

login:function() {

this.fp.form.submit({

waitMsg : '正在登录......',

url : 'login.ejf?cmd=login',

success : function(form, action) {

window.location.href = 'manage.ejf';

},

failure : function(form, action) {

form.reset();

if (action.failureType == Ext.form.Action.SERVER_INVALID)

Ext.MessageBox.alert('警告', action.result.errors.msg);

}

});

},

initComponent : function(){

LoginWindow.superclass.initComponent.call(this);

this.fp=this.createFormPanel();

this.add(this.fp);

this.addButton('登陆',this.login,this);

this.addButton('重置', function(){this.fp.form.reset();},this);

}

});

Ext.onReady(function()

{

var win=new LoginWindow();

win.show();

var bd = Ext.getDom('randCode');

var bd2 = Ext.get(bd.parentNode);

bd2.createChild({tag: 'img', src: 'image.jsp',align:'absbottom'});

}

);

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;

}

image.jsp:

<%@ page contentType="image/jpeg" import="java.util.*,java.awt.*,java.io.*,java.awt.image.*,javax.imageio.*" pageEncoding="utf-8"%>

<%!

Color getRandColor(int fc,int bc){//给定范围获得随机颜色

Random random = new Random();

if(fc>255) fc=255;

if(bc>255) bc=255;

int r=fc+random.nextInt(bc-fc);

int g=fc+random.nextInt(bc-fc);

int b=fc+random.nextInt(bc-fc);

return new Color(r,g,b);

}

%>

<%

//设置页面不缓存

response.setHeader("Pragma","No-cache");

response.setHeader("Cache-Control","no-cache");

response.setDateHeader("Expires", 0);

// 在内存中创建图象

int width=60, height=20;

BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

// 获取图形上下文

Graphics g = image.getGraphics();

//生成随机类

Random random = new Random();

// 设定背景色

g.setColor(getRandColor(200,250));

g.fillRect(0, 0, width, height);

//设定字体

g.setFont(new Font("Times New Roman",Font.PLAIN,18));

//画边框

//g.setColor(new Color());

//g.drawRect(0,0,width-1,height-1);

// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到

g.setColor(getRandColor(160,200));

for (int i=0;i<155;i++)

{

int x = random.nextInt(width);

int y = random.nextInt(height);

int xl = random.nextInt(12);

int yl = random.nextInt(12);

g.drawLine(x,y,x+xl,y+yl);

}

// 取随机产生的认证码(4位数字)

String sRand="";

for (int i=0;i<4;i++){

String rand=String.valueOf(random.nextInt(10));

sRand+=rand;

// 将认证码显示到图象中

g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));// 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成

g.drawString(rand,13*i+6,16);

}

// 将认证码存入SESSION

session.setAttribute("rand",sRand);

// 图象生效

g.dispose();

OutputStream output=response.getOutputStream();

// 输出图象到页面

ImageIO.write(image, "JPEG", response.getOutputStream());

output.flush();

out.clear();

out = pageContext.pushBody();

%>

调用很简单代码如下:

Ext.onReady(function(){

var w = new LoginWin();

w.show();

var bd = Ext.getDom('randCode');

var bd2 = Ext.get(bd.parentNode);

bd2.createChild([{tag:'span',html:' '},{tag: 'img', src: 'image.jsp',align:'absbottom'}]);

});