Extjs 带验证码的登陆窗口，java版

1. Ext.QuickTips.init();
2. LoginWindow=Ext.extend(Ext.Window,{
3. title : '登陆系统',
4. width : 265,
5. height : 170,
6. collapsible : true,
7. defaults : {
8. border : false
9. },
10. buttonAlign : 'center',
11. createFormPanel :function() {
12. return new Ext.form.FormPanel( {
13. bodyStyle : 'padding-top:6px',
14. defaultType : 'textfield',
15. labelAlign : 'right',
16. labelWidth : 55,
17. labelPad : 0,
18. frame : true,
19. defaults : {
20. allowBlank : false,
21. width : 158
22. },
23. items : [{
24. cls : 'user',
25. name : 'username',
26. fieldLabel : '帐号',
27. blankText : '帐号不能为空'
28. }, {
29. cls : 'key',
30. name : 'password',
31. fieldLabel : '密码',
32. blankText : '密码不能为空',
33. inputType : 'password'
34. }, {
35. cls : 'key',
36. name:'randCode',
37. id:'randCode',
38. fieldLabel:'验证码',
39. width:80,
40. blankText : '验证码不能为空'
41. }]
42. });
43. },
44. login:function() {
45. this.fp.form.submit({
46. waitMsg : '正在登录......',
47. url : 'login.ejf?cmd=login',
48. success : function(form, action) {
49. window.location.href = 'manage.ejf';
50. },
51. failure : function(form, action) {
52. form.reset();
53. if (action.failureType == Ext.form.Action.SERVER_INVALID)
54. Ext.MessageBox.alert('警告', action.result.errors.msg);
55. }
56. });
57. },
58. initComponent : function(){
59.
60. LoginWindow.superclass.initComponent.call(this);
61. this.fp=this.createFormPanel();
62. this.add(this.fp);
63. this.addButton('登陆',this.login,this);
64. this.addButton('重置', function(){this.fp.form.reset();},this);
65.
66. }
67. });
68.
69. Ext.onReady(function()
70. {
71. var win=new LoginWindow();
72.
73. win.show();
74. var bd = Ext.getDom('randCode');
75. var bd2 = Ext.get(bd.parentNode);
76. bd2.createChild({tag: 'img', src: 'image.jsp',align:'absbottom'});
77. }
78. );

下面是css代码：

[复制到剪贴板]CODE:
# .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'}]);
});