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