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

上几篇文章，主要学习了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);
13. if(this.isLoader)this.loadCodeImg();
14. },
15. alignErrorIcon:function(){
16. this.errorIcon.alignTo(this.codeEl,'tl-tr',[2,0]);
17. },
18. 
    
19. loadCodeImg:function(){
20. this.codeEl.set({src:this.codeUrl+'?id='+Math.random()});
21. }
22. 
    
23. })

以上代码中，定义了一个“类”，名字是：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. varcheckcode=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. varform=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:'00100'
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(){
46. }
47. },{
48. text:'取消',
49. handler:function(){
51. }
52. }]
53. })
54. Ext.apply(this,{
55. height:160,
56. width:280,
57. title:'用户登陆',
58. closeAction:'hide',
59. closable:false,
60. iconCls:'login',
61. layout:'fit',
62. modal:true,
63. plain:true,
64. resizable:false,
65. items:form
66. });
67. this.callParent(arguments);
68. }
69. });

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

1. requires:['SMS.view.Login']
2. varwin;
3. win=Ext.create('SMS.view.Login').show();

最后效果图：