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{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.         
13.         if (this.isLoader) this.loadCodeImg();
14.     },
15.     alignErrorIcon: function() {
16.         this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);
17.     },
18.     loadCodeImg: function() {
19.         this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });
20.     }
21. })

 

以上代码中，定义了一个“类”，名字是：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.                 240
34.             },{
35.                 xtype: 'textfield',
36.                 fieldLabel: '密   码',
37.                 allowBlank: false,
38.                 blankText : '密码不能为空',
39.                 240,
40.                 inputType : 'password' 
41.             },checkcode],
42.             buttons:[{
43.                 text:'登录',
44.                 handler:function(){
45.                     
46.                 }
47.             },{
48.                 text:'取消',
49.                 handler:function(){
50.                     
51.                 }
52.             }]
53.         })
54.         Ext.apply(this,{
55.             height: 160,
56.              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。