用ExtJs4.2实现验证码

// 验证码控件
Ext.define(&＃39;fms.ux.VerificationCode&＃39;, {extend : &＃39;Ext.container.Container&＃39;,alias : &＃39;widget.verificationcode&＃39;,codeUrl : Ext.BLANK_IMAGE_URL,fieldLabel : &＃39;&＃39;,tabIndex : 0,border:0,layout : {type : &＃39;hbox&＃39;},initComponent : function() {var me &＃61; this;me.image &＃61; Ext.create(Ext.Img, {id : &＃39;verifycode_img&＃39;,style : "cursor:pointer ",src : me.codeUrl,margin : &＃39;0 0 0 5&＃39;,listeners : {click : me.loadCodeImg,element : "el",scope : me}});me.items &＃61; [{xtype : &＃39;textfield&＃39;,id : &＃39;verifycode_input&＃39;,fieldLabel : me.fieldLabel,border : 0,tabIndex : me.tabIndex}, me.image]me.callParent();},loadCodeImg : function() {// 如果浏览器发现url不变&＃xff0c;就认为图片没有改变&＃xff0c;就会使用缓存中的图片&＃xff0c;// 而不是重新向服务器请求&＃xff0c;所以需要加一个参数&＃xff0c;改变url.this.image.setSrc(this.codeUrl &＃43; &＃39;?time&＃61;&＃39;&＃43; new Date().getTime());}}); 调用方法&＃xff1a;

Ext.create(&＃39;fms.ux.VerificationCode&＃39;, {fieldLabel : &＃39;验证码&＃39;,codeUrl : &＃39;verificationCode.fms&＃39;,x : iWidth - 500,y : iHeight - 240,tabIndex : 3,width : 300
}); 运行看下效果&＃xff0c;感觉在Chrome下貌似尺寸有点不对。正好在网上也看到了一个例子&＃xff0c;所以有了以下的方式&＃xff1a;
实现方式二&＃xff1a;
修改部分后实现如下&＃xff1a;
验证码实现代码如下: 保存为VerifyCode.js  

//验证码控件
Ext.define(&＃39;fms.ux.VerifyCode&＃39;, {extend : &＃39;Ext.form.field.Text&＃39;,alias : &＃39;widget.verifycode&＃39;,inputTyle : &＃39;codefield&＃39;,codeUrl : Ext.BLANK_IMAGE_URL,isLoader : true,onRender : function(ct, position) {this.callParent(arguments);this.codeEl &＃61; this.bodyEl.createChild({tag : &＃39;img&＃39;,src : Ext.BLANK_IMAGE_URL,style : &＃39;width:75px; height:22px; vertical-align:top; cursor:pointer; margin-left:5px;&＃39;});// this.codeEl.addCls(&＃39;x-form-verifycode&＃39;);this.codeEl.on(&＃39;click&＃39;, this.loadCodeImg, this);if (this.isLoader) {this.loadCodeImg();}},alignErrorIcon : function() {this.errorIcon.alignTo(this.codeEl, &＃39;tl-tr&＃39;, [2, 0]);},// 如果浏览器发现url不变&＃xff0c;就认为图片没有改变&＃xff0c;就会使用缓存中的图片&＃xff0c;// 而不是重新向服务器请求&＃xff0c;所以需要加一个参数&＃xff0c;改变urlloadCodeImg : function() {this.codeEl.set({src : this.codeUrl &＃43; &＃39;?id&＃61;&＃39; &＃43; Math.random()});},listeners : {&＃39;boxready&＃39; : function(me, width, height, eOpts) {var inputElWidth &＃61; me.getWidth() - me.labelWidth- me.codeEl.dom.width - 12;me.inputEl.setWidth(inputElWidth);}}
}); 其中codeUrl是生成验证码的后台链接。
调用代码如下&＃xff1a;

Ext.create(&＃39;fms.ux.VerifyCode&＃39;, {fieldLabel : &＃39;验证码&＃39;,name : &＃39;verifycode&＃39;,id : &＃39;verifycode&＃39;,isLoader : true,blankText : &＃39;验证码不能为空&＃39;,codeUrl : &＃39;verificationCode.fms&＃39;,tabIndex : 3,width : 300
})&＃xff1b;

效果有是有了&＃xff0c;但是呢&＃xff0c;在测试的时候发现了些小问题&＃xff1a;就是在改变浏览器宽度和高度的时候渲染会不正确。
在知道有第二种实现方式的情况下&＃xff0c;真的不想再回到第一种实现方式了&＃xff08;这里不是说哪种好&＃xff0c;就是有点犯贱了....&＃xff09;。然后&＃xff0c;突然想到了Ext.form.field.File&＃xff0c;因为觉得把那个button改成图片不就可以了&＃xff0c;所以有了下面一种方式&＃xff1a;
实现方式三&＃xff1a;
验证码实现代码保存为&＃xff1a;VerifyCode.js

Ext.define(&＃39;fms.ux.VerifyCode&＃39;, {extend : &＃39;Ext.form.field.Trigger&＃39;,alias : [&＃39;widget.verifycodefield&＃39;, &＃39;widget.verifycode&＃39;],// 图片的URL地址codeImgUrl : Ext.BLANK_IMAGE_URL,// 图片和输入框之间的距离imgMargin : 5,// 图片的宽度imgWidth : 75,// 图片的高度imgHeight : 23,// 点击图片的时候是否清空输入框clearOnClick : true,// 临时的FieldBody样式extraFieldBodyCls : Ext.baseCSSPrefix &＃43; &＃39;form-file-wrap&＃39;,componentLayout : &＃39;triggerfield&＃39;,childEls : [&＃39;imageWrap&＃39;],onRender : function() {var me &＃61; this, id &＃61; me.id, inputEl;me.callParent(arguments);inputEl &＃61; me.inputEl;// name goes on the fileInput, not the text inputinputEl.dom.name &＃61; &＃39;&＃39;;// 将imgConfig对象拷贝给前一个参数&＃xff0c;并覆盖me.image &＃61; new Ext.Img(Ext.apply({renderTo : id &＃43; &＃39;-imageWrap&＃39;,ownerCt : me,ownerLayout : me.componentLayout,id : id &＃43; &＃39;-img&＃39;,ui : me.ui,src : me.codeImgUrl,disabled : me.disabled,width : me.imgWidth,height : me.imgHeight,style : me.getImgMarginProp() &＃43; me.imgMargin &＃43; &＃39;px;cursor:pointer;&＃39;,inputName : me.getName(),listeners : {scope : me,click : {element : &＃39;el&＃39;,fn : me.onImgClick}}}, me.imgConfig));// me.browseButtonWrap.dom.style.width &＃61;// (me.browseButtonWrap.dom.lastChild.offsetWidth &＃43;// me.button.getEl().getMargin(&＃39;lr&＃39;)) &＃43; &＃39;px&＃39;;me.imageWrap.dom.style.width &＃61; (me.imgWidth &＃43; me.image.getEl().getMargin(&＃39;lr&＃39;))&＃43; &＃39;px&＃39;;if (Ext.isIE) {me.image.getEl().repaint();}},/*** Gets the markup to be inserted into the subTplMarkup.*/getTriggerMarkup : function() {return &＃39;&＃39;;},onImgClick : function() {// 重新定义图片地址this.image.setSrc(this.codeImgUrl &＃43; &＃39;?time&＃61;&＃39; &＃43; new Date().getTime());this.reset();},getImgMarginProp : function() {return &＃39;margin-left:&＃39;;},setValue : Ext.emptyFn,reset : function() {var me &＃61; this, clear &＃61; me.clearOnClick;if (me.rendered) {if (clear) {me.inputEl.dom.value &＃61; &＃39;&＃39;;}}}});
调用代码&＃xff1a; 

Ext.create(&＃39;fms.ux.VerifyCode&＃39;, {fieldLabel : &＃39;验证码&＃39;,name : &＃39;verifycode&＃39;,id : &＃39;verifycode&＃39;,blankText : &＃39;验证码不能为空&＃39;,codeImgUrl : &＃39;verificationCode.fms&＃39;,tabIndex : 3,x : iWidth - 500,y : iHeight - 240,width : 300
}); 好了&＃xff0c;到这里就差不多了。测试&＃xff0c;是没有发现什么大的问题&＃xff08;可能没有测试仔细...有发现问题又改呗&＃xff01;&＃xff09;。
效果图如下&＃xff1a;