Extjs 带验证码的登陆窗口

[img]http://www.17ext.com/attachment.aspx?attachmentid=746[/img]
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代码：

1. # .user{ background:url(images/user.gif) no-repeat 1px 2px; }
2. # .key{ background:url(images/key.gif) no-repeat 1px 2px; }
3. # .rand{ background:url(images/rand.gif) no-repeat 1px 2px; }
4. # .key,.user,.rand{
5. # background-color:#FFFFFF;
6. # padding-left:20px;
7. # font-weight:bold;
8. # color:#000033;
9. # }

复制代码
后天 image.jsp：

1. <%@ page contentType="image/jpeg" import="java.util.*,java.awt.*,java.io.*,java.awt.image.*,javax.imageio.*" pageEncoding="utf-8"%>
2. <%!
3. Color getRandColor(int fc,int bc){//给定范围获得随机颜色
4. Random random = new Random();
5. if(fc>255) fc=255;
6. if(bc>255) bc=255;
7. int r=fc+random.nextInt(bc-fc);
8. int g=fc+random.nextInt(bc-fc);
9. int b=fc+random.nextInt(bc-fc);
10. return new Color(r,g,b);
11. }
12. %>
13. <%
14. //设置页面不缓存
15. response.setHeader("Pragma","No-cache");
16. response.setHeader("Cache-Control","no-cache");
17. response.setDateHeader("Expires", 0);
18.
19. // 在内存中创建图象
20. int width=60, height=20;
21. BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
22.
23. // 获取图形上下文
24. Graphics g = image.getGraphics();
25.
26. //生成随机类
27. Random random = new Random();
28.
29. // 设定背景色
30. g.setColor(getRandColor(200,250));
31. g.fillRect(0, 0, width, height);
32.
33. //设定字体
34. g.setFont(new Font("Times New Roman",Font.PLAIN,18));
35.
36. //画边框
37. //g.setColor(new Color());
38. //g.drawRect(0,0,width-1,height-1);
39.
40. // 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
41. g.setColor(getRandColor(160,200));
42. for (int i=0;i<155;i++)
43. {
44. int x = random.nextInt(width);
45. int y = random.nextInt(height);
46. int xl = random.nextInt(12);
47. int yl = random.nextInt(12);
48. g.drawLine(x,y,x+xl,y+yl);
49. }
50.
51. // 取随机产生的认证码(4位数字)
52. String sRand="";
53. for (int i=0;i<4;i++){
54. String rand=String.valueOf(random.nextInt(10));
55. sRand+=rand;
56. // 将认证码显示到图象中
57. g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));// 调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
58. g.drawString(rand,13*i+6,16);
59. }
60.
61. // 将认证码存入SESSION
62. session.setAttribute("rand",sRand);
63.
64. // 图象生效
65. g.dispose();
66. OutputStream output=response.getOutputStream();
67.
68. // 输出图象到页面
69. ImageIO.write(image, "JPEG", response.getOutputStream());
70. output.flush();
71. out.clear();
72. out = pageContext.pushBody();
73.
74. %>

复制代码
调用很简单代码如下：

* 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'}]);
* });