ExtJS4图片验证码的实现

ExtJS4学习笔记(十)---ExtJS4图片验证码的实现

转自：http://blog.sina.com.cn/s/blog_8d4bbd890100xaxh.html

上多少篇文章，重要学习了Extjs4 Grid的使用方法，从本篇开端，我们开始其余组件的学习，使用。在登录、注册甚至是发表文章或帖子的时候，都会用到验证码这个货色，那么在EXTJS 中，能够使用验证码功能么？谜底是确定的，在EXTJS4之前，也有良多验证码的实现，在Extjs4中，验证码到底如何实现呢？

临时，我们将验证码组件，命名为CheckCode。此组件继续自Ext.form.field.Text，在实现之前，我们须要写两个款式，分辨用来把持验证码的输入框跟验证码图片的大小。

CSS样式为：

 

1. #CheckCode{ float:left;}
2. .x-form-code{width:73px;height:20px;vertical-align:middle;cursor:pointer; float:left; margin-left:7px;}

 

记住这两个样式的定义，后面，我们会用到它。

验证码的JS代码：

 

1. Ext.define('SMS.view.CheckCode',{
2. extend: 'Ext.form.field.Text',
3. alias: 'widget.checkcode',
4. inputTyle:'codefield',
5. codeUrl:Ext.BLANK_IMAGE_URL,
6. isLoader:true,
7. onRender:function(ct,position){
8. this.callParent(arguments);
9. this.codeEl = ct.createChild({ tag: 'img', src: Ext.BLANK_IMAGE_URL});
10. this.codeEl.addCls('x-form-code');
11. this.codeEl.on('click', this.loadCodeImg, this);
12. if (this.isLoader) this.loadCodeImg();
13. },
14. alignErrorIcon: function() {
15. this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);
16. },
17. loadCodeImg: function() {
18. this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });
19. }
20. })

 

以上代码中，定义了一个“类”，名字是：SMS.view.CheckCode，实在这个名字，相称于extjs 3.x之中的命名空间，以前也提到过。它继承自Ext.form.field.Text，在它的onRender中，我们写了一些代码。其中this.callParent(arguments);  取代了xxxx.superclass.onRender.call(this, ct, position);在Ext.form.field.Text的基本上，应用createChild方式，创建了一个图片，并为其增加了一个名为x- form-code，而后，给其创立了一个click事件，这个事件实现的功能是，当咱们点击验证码图片时，换另外一张图片，也就是常说的：“看不清？换 一张功能。”，最后，假如isLoader为True时，调用loadCodeImg办法。至此，验证码功效全体实现了。下面，我们看看如何使用。

新建Login.js文件，定义“类”SMS.view.Login，其全部代码为：

 

1. Ext.define('SMS.view.Login',{
2. extend:'Ext.window.Window',
3. alias: 'widget.loginForm',
4. requires: ['Ext.form.*','SMS.view.CheckCode'],
5. initComponent:function(){
6. var checkcode = Ext.create('SMS.view.CheckCode',{
7. cls : 'key',
8. fieldLabel : '验证码',
9. name : 'CheckCode',
10. id : 'CheckCode',
11. allowBlank : false,
12. isLoader:true,
13. blankText : '验证码不能为空',
14. codeUrl: '/include/checkCode.asp',
15. width : 160
16. })
17. var form = Ext.widget('form',{
18. border: false,
19. bodyPadding: 10,
20. fieldDefaults: {
21. labelAlign: 'left',
22. labelWidth: 55,
23. labelStyle: 'font-weight:bold'
24. },
25. defaults: {
26. margins: '0 0 10 0'
27. },
28. items:[{
29. xtype: 'textfield',
30. fieldLabel: '用户名',
31. blankText : '用户名不能为空',
32. allowBlank: false,
33. width:240
34. },{
35. xtype: 'textfield',
36. fieldLabel: '密   码',
37. allowBlank: false,
38. blankText : '密码不能为空',
39. width:240,
40. inputType : 'password'
41. },checkcode],
42. buttons:[{
43. text:'登录',
44. handler:function(){
45. }
46. },{
47. text:'取消',
48. handler:function(){
49. }
50. }]
51. })
52. Ext.apply(this,{
53. height: 160,
54. width: 280,
55. title: '用户登陆',
56. closeAction: 'hide',
57. closable : false,
58. iconCls: 'login',
59. layout: 'fit',
60. modal : true,
61. plain : true,
62. resizable: false,
63. items:form
64. });
65. this.callParent(arguments);
66. }
67. });

 

而后在主页面的代码中调用此LoginWindow。