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

上几篇文章，主要学习了Extjs4 Grid的使用方法，从本篇开始，我们开始其他组件的学习，使用。在登录、注册甚至是发表文章或帖子的时候，都会用到验证码这个东西，那么在EXTJS中，可以使用验证码功能么？答案是肯定的，在EXTJS4之前，也有很多验证码的实现，在Extjs4中，验证码到底如何实现呢？

暂时，我们将验证码组件，命名为CheckCode。此组件继承自Ext.form.field.Text，在实现之前，我们需要写两个样式，分别用来控制验证码的输入框和验证码图片的大小。

CSS样式为：

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

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

验证码的JS代码：

Ext.define('SMS.view.CheckCode',{
    extend: 'Ext.form.field.Text',
    alias: 'widget.checkcode',
    inputTyle:'codefield',
    codeUrl:Ext.BLANK_IMAGE_URL,
    isLoader:true,
    onRender:function(ct,position){
        this.callParent(arguments);
        this.codeEl = ct.createChild({ tag: 'img', src: Ext.BLANK_IMAGE_URL});
        this.codeEl.addCls('x-form-code');
        this.codeEl.on('click', this.loadCodeImg, this);

        if (this.isLoader) this.loadCodeImg();
    },
    alignErrorIcon: function() {
        this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);
    },

    loadCodeImg: function() {
        this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });
    }

})

以上代码中，定义了一个“类”，名字是：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，其全部代码为：

Ext.define('SMS.view.Login',{
    extend:'Ext.window.Window',
    alias: 'widget.loginForm',
    requires: ['Ext.form.*','SMS.view.CheckCode'],
    initComponent:function(){
        var checkcode = Ext.create('SMS.view.CheckCode',{
            cls : 'key',
            fieldLabel : '验证码',
            name : 'CheckCode',
            id : 'CheckCode',
            allowBlank : false,
            isLoader:true,
            blankText : '验证码不能为空',
            codeUrl: '/include/checkCode.asp',
            width : 160
        })
        var form = Ext.widget('form',{
            border: false,
            bodyPadding: 10,
            fieldDefaults: {
                labelAlign: 'left',
                labelWidth: 55,
                labelStyle: 'font-weight:bold'
            },
            defaults: {
                margins: '0 0 10 0'
            },
            items:[{
                xtype: 'textfield',
                fieldLabel: '用户名',
                blankText : '用户名不能为空',
                allowBlank: false,
                width:240
            },{
                xtype: 'textfield',
                fieldLabel: '密   码',
                allowBlank: false,
                blankText : '密码不能为空',
                width:240,
                inputType : 'password'
            },checkcode],
            buttons:[{
                text:'登录',
                handler:function(){

                }
            },{
                text:'取消',
                handler:function(){

                }
            }]
        })
        Ext.apply(this,{
            height: 160,
            width: 280,
            title: '用户登陆',
            closeAction: 'hide',
            closable : false,
            iconCls: 'login',
            layout: 'fit',
            modal : true,
            plain : true,
            resizable: false,
            items:form
        });
        this.callParent(arguments);
    }
});

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

requires:['SMS.view.Login']
var win;
win = Ext.create('SMS.view.Login').show();

最后效果图：