用ExtJs4.2实现验证码

2019独角兽企业重金招聘Python工程师标准>>>

在一个项目中要生成验证码，用ExtJs 4.2实现。最常见的验证码就是一个输入框和一个验证码图片。
第一个感觉就是用Ext.container.Container将textfield和img放进去。所以，有了以下的代码：
实现方式一：
保存为VerificationCode.js

// 验证码控件
Ext.define('fms.ux.VerificationCode', {

			extend : 'Ext.container.Container',
			alias : 'widget.verificationcode',
			codeUrl : Ext.BLANK_IMAGE_URL,
			fieldLabel : '',
			tabIndex : 0,
			border:0,
			layout : {
				type : 'hbox'
			},
			initComponent : function() {

				var me = this;
				me.image = Ext.create(Ext.Img, {
							id : 'verifycode_img',
							style : "cursor:pointer ",
							src : me.codeUrl,
							margin : '0 0 0 5',
							listeners : {
								click : me.loadCodeImg,
								element : "el",
								scope : me
							}
						});
				me.items = [{
							xtype : 'textfield',
							id : 'verifycode_input',
							fieldLabel : me.fieldLabel,
							border : 0,
							tabIndex : me.tabIndex
						}, me.image]
				me.callParent();
			},

			loadCodeImg : function() {
				// 如果浏览器发现url不变，就认为图片没有改变，就会使用缓存中的图片，
				// 而不是重新向服务器请求，所以需要加一个参数，改变url.
				this.image.setSrc(this.codeUrl + '?time='
						+ new Date().getTime());
			}

		});

调用方法：

Ext.create('fms.ux.VerificationCode', {
	fieldLabel : '验证码',
	codeUrl : 'verificationCode.fms',
	x : iWidth - 500,
	y : iHeight - 240,
	tabIndex : 3,
	width : 300
});

运行看下效果，感觉在Chrome下貌似尺寸有点不对。正好在网上也看到了一个例子，所以有了以下的方式：
实现方式二：
修改部分后实现如下：
验证码实现代码如下: 保存为VerifyCode.js  

//验证码控件
Ext.define('fms.ux.VerifyCode', {
	extend : 'Ext.form.field.Text',
	alias : 'widget.verifycode',
	inputTyle : 'codefield',
	codeUrl : Ext.BLANK_IMAGE_URL,
	isLoader : true,
	onRender : function(ct, position) {

		this.callParent(arguments);

		this.codeEl = this.bodyEl.createChild({
			tag : 'img',
			src : Ext.BLANK_IMAGE_URL,
			style : 'width:75px; height:22px; vertical-align:top; cursor:pointer; margin-left:5px;'
		});
		// this.codeEl.addCls('x-form-verifycode');
		this.codeEl.on('click', this.loadCodeImg, this);
		if (this.isLoader) {
			this.loadCodeImg();
		}

	},
	alignErrorIcon : function() {
		this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);
	},
	// 如果浏览器发现url不变，就认为图片没有改变，就会使用缓存中的图片，
	// 而不是重新向服务器请求，所以需要加一个参数，改变url
	loadCodeImg : function() {
		this.codeEl.set({
			src : this.codeUrl + '?id=' + Math.random()
		});
	},
	listeners : {
		'boxready' : function(me, width, height, eOpts) {
			var inputElWidth = me.getWidth() - me.labelWidth
					- me.codeEl.dom.width - 12;
			me.inputEl.setWidth(inputElWidth);
		}
	}
});

其中codeUrl是生成验证码的后台链接。
调用代码如下：

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

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

Ext.define('fms.ux.VerifyCode', {

	extend : 'Ext.form.field.Trigger',
	alias : ['widget.verifycodefield', 'widget.verifycode'],
	// 图片的URL地址
	codeImgUrl : Ext.BLANK_IMAGE_URL,
	// 图片和输入框之间的距离
	imgMargin : 5,
	// 图片的宽度
	imgWidth : 75,
	// 图片的高度
	imgHeight : 23,
	// 点击图片的时候是否清空输入框
	clearOnClick : true,
	// 临时的FieldBody样式
	extraFieldBodyCls : Ext.baseCSSPrefix + 'form-file-wrap',
	componentLayout : 'triggerfield',
	childEls : ['imageWrap'],

	onRender : function() {
		var me = this, id = me.id, inputEl;

		me.callParent(arguments);

		inputEl = me.inputEl;

		// name goes on the fileInput, not the text input
		inputEl.dom.name = '';

		// 将imgConfig对象拷贝给前一个参数，并覆盖
		me.image = new Ext.Img(Ext.apply({
			renderTo : id + '-imageWrap',
			ownerCt : me,
			ownerLayout : me.componentLayout,
			id : id + '-img',
			ui : me.ui,
			src : me.codeImgUrl,
			disabled : me.disabled,
			width : me.imgWidth,
			height : me.imgHeight,
			style : me.getImgMarginProp() + me.imgMargin + 'px;cursor:pointer;',
			inputName : me.getName(),
			listeners : {
				scope : me,
				click : {
					element : 'el',
					fn : me.onImgClick
				}
			}
		}, me.imgConfig));

		// me.browseButtonWrap.dom.style.width =
		// (me.browseButtonWrap.dom.lastChild.offsetWidth +
		// me.button.getEl().getMargin('lr')) + 'px';

		me.imageWrap.dom.style.width = (me.imgWidth + me.image.getEl()
				.getMargin('lr'))
				+ 'px';
		if (Ext.isIE) {
			me.image.getEl().repaint();
		}
	},

	/**
	 * Gets the markup to be inserted into the subTplMarkup.
	 */
	getTriggerMarkup : function() {
		return '<td id="' + this.id + '-imageWrap"></td>';
	},

	onImgClick : function() {
		// 重新定义图片地址
		this.image.setSrc(this.codeImgUrl + '?time=' + new Date().getTime());
		this.reset();
	},
	getImgMarginProp : function() {
		return 'margin-left:';
	},

	setValue : Ext.emptyFn,

	reset : function() {
		var me = this, clear = me.clearOnClick;
		if (me.rendered) {
			if (clear) {
				me.inputEl.dom.value = '';
			}
		}
	}

});

调用代码： 

Ext.create('fms.ux.VerifyCode', {
	fieldLabel : '验证码',
	name : 'verifycode',
	id : 'verifycode',
	blankText : '验证码不能为空',
	codeImgUrl : 'verificationCode.fms',
	tabIndex : 3,
	x : iWidth - 500,
	y : iHeight - 240,
	width : 300
});

好了，到这里就差不多了。测试，是没有发现什么大的问题（可能没有测试仔细...有发现问题又改呗！）。
效果图如下：

转载于:https://my.oschina.net/guanzhenxing/blog/167543