????? 上几篇文章，主要学习了 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 代码(CheckCode.js)：

?

Ext.define('SMS.view.CheckCode', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.checkcode',
    inputType: '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();
        }
    },
    
    aliasErrorIcon: function() {
        this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);
    },
    
    loadCodeImg: function() {
        //如果浏览器发现url不变，就认为图片没有改变，就会使用缓存中的图片，而不是重新向服务器请求，所以需要加一个参数，改变url 
        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，其全部代码为(Login.js)：

?

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: 'rand.action',
            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',
                id: 'username',
                name: 'username',
                fieldLabel: '用户名',
                blankText: '用户名不能为空',
                allowBlank: false,
                width: 240
            }, {
                xtype: 'textfield',
                id: 'password',
                name: 'password',
                fieldLabel: '密   码',
                allowBlank: false,
                blankText: '密码不能为空',
                width: 240,
                inputType: 'password'
            }, checkcode],
            
            buttons: [{
                text: '登录',
                handler: function() {
                //获取当前的表单form
                var form = this.up('form').getForm();
                //判断否通过了表单验证，如果不能空的为空则不能提交
                if (form.isValid()) {
                    //alert("可以提交");
                    form.submit({