ExtJS4.1.1登入验证码的实现（可以整合struts2）

最新推荐文章于 2016-10-19 10:10:48 发布

置顶 WMS

最新推荐文章于 2016-10-19 10:10:48 发布

阅读量6.8k

点赞数

分类专栏： extjs

本文链接：https://blog.csdn.net/wu560130911/article/details/8238548

版权

extjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

我是采用extjs的mvc的结构写的登入界面及其他，代码完整下载地址是：点击

我的框架结构是：

其中包含了我其他的一些文件，但只要修改一下就可以完全实现登入系统了，

Checkcode.js

/**
 * @author WMS_WIN8
 */
Ext.define('wms.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()
						});
			}
		});

/**
 * @author WMS_WIN8
 */
 Ext.define('wms.view.Login',{
 	extend:'Ext.window.Window',
 	alias:'widget.loginForm',
 	requires:['Ext.form.*','wms.view.Checkcode'],
 	initComponent:function(){
 		var checkcode = Ext.create('wms.view.Checkcode',{
 			cls:'key',
 			fieldLabel:'验证码',
 			name:'CheckCode',
 			id:'CheckCode',
 			allowBlank:false,
 			isLoader:true,
 			blankText:'验证码不能为空',
 			codeUrl:'code.wms',
 			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:'密码',
	 			blankText:'密码不为空',
	 			allowBlank:false,
	 			width:240,
	 			inputType:'password'
 			},checkcode],
 			buttons:[{
 				text:'登入'
 			},{
 				text:'重置'
 			}]
 		});
 		Ext.apply(this,{
		 		height:160,
		 		width:280,
		 		title:'用户登入',
		 		colseAction:'hide',
		 		closable:false,
		 		iconCls:'login',
		 		layout:'fit',
		 		modal:true,
		 		plain:true,
		 		resizable:false,
		 		items:form
 		});
 		
 		this.callParent(arguments);
 	}
 });