ExtJs4 实现验证码输入框

  我在网上看到了有其他网友的实现方式，他是继承Ext.form.field.Text来实现的，经过测试，这种实现方式确实可以完成验证码输入框的功能，但是有两个地方有待完善：首先，输入框的样式在IE浏览器下与单纯的Text输入框不同，失去了原有的渲染效果，导致同一个form中不同输入框之间风格出现差异；其次，他是利用css来将验证码图片外挂到整个Text输入框（包括fieldLabel）的右边，因此，实际上验证码图片与输入框并没有融入为一个整体。因此，在参考该代码的基础上，AH-BILL作了全新的实现，即继承Ext.form.field.Base这个基础的类。代码如下：

Ext.define('Slk.view.ui.CheckCode',{ 
    extend: 'Ext.form.field.Base',  
    alias: 'widget.checkcode', 
    codeUrl:Ext.BLANK_IMAGE_URL, //生成验证码对应的URL
    isLoader:true,
 checkcodeWidth:this.checkcodeWidth||75, //设置验证码宽度
 initComponent:function(){
  var self=this;
   Ext.apply(this,{ 
   listeners:{
    afterrender:function(){
      this.codeEl = this.bodyEl.createChild({ tag: 'img', title:'点击刷新', src: Ext.BLANK_IMAGE_URL}); 
      this.inputEl.setWidth(this.width-this.labelWidth-(this.checkcodeWidth+10)); //这里减掉验证码的宽度
      this.codeEl.on('click', this.loadCodeImg, this); 
      this.codeEl.addCls('x-form-code'); 
      if (this.isLoader) this.loadCodeImg(); 
    }
   }
        }); 
        this.callParent(arguments); 
  
 },
  
    loadCodeImg: function() { 
        this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() }); 
    } 
})    
上面我们加入了一个css样式——x-form-code，所以需要在css文件中定义一下：
.x-form-code {
 width: 73px;
 height: 20px;
 vertical-align: middle;
 cursor: pointer;
 float: left;
 margin-left: 7px;
}

创建的时候使用如下代码，除了多一个codeUrl，其他属性与Text并没有太大差异：
        var checkcode = Ext.create('Slk.view.ui.CheckCode',{ 
            cls : 'key', 
            fieldLabel : '验证码', 
            name : 'checkcode', 
            id : 'checkcode', 
            allowBlank : false, 
            isLoader:true, 
            blankText : '验证码不能为空', 
            codeUrl: 'checkCode.action', 
            width : 260 
        }) ;