Extjs 带验证码的登陆窗口

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