现在的位置: 首页 > 综合 > 正文

ExtJS4学习笔记(十三)—ExtJS4图片验证码的实现

2014年04月05日 ⁄ 综合 ⁄ 共 3547字 ⁄ 字号 评论关闭

上几篇文章,主要学习了Extjs4 Grid的使用方法,从本篇开始,我们开始其他组件的学习,使用。在登录、注册甚至是发表文章或帖子的时候,都会用到验证码这个东西,那么在EXTJS中,可以使用验证码功能么?答案是肯定的,在EXTJS4之前,也有很多验证码的实现,在Extjs4中,验证码到底如何实现呢?

暂时,我们将验证码组件,命名为CheckCode。此组件继承自Ext.form.field.Text,在实现之前,我们需要写两个样式,分别用来控制验证码的输入框和验证码图片的大小。

CSS样式为:

 
  1. #CheckCode{ float:left;}
  2. .x-form-code{width:73px;height:20px;vertical-align:middle;cursor:pointerfloat:leftmargin-left:7px;}

记住这两个样式的定义,后面,我们会用到它。

验证码的JS代码:

 
  1. Ext.define('SMS.view.CheckCode',{
  2.     extend: 'Ext.form.field.Text'
  3.     alias: 'widget.checkcode',
  4.     inputTyle:'codefield',
  5.     codeUrl:Ext.BLANK_IMAGE_URL,
  6.     isLoader:true,
  7.     onRender:function(ct,position){
  8.         this.callParent(arguments);
  9.         this.codeEl = ct.createChild({ tag: 'img', src: Ext.BLANK_IMAGE_URL});
  10.         this.codeEl.addCls('x-form-code');
  11.         this.codeEl.on('click'this.loadCodeImg, this);
  12.         
  13.         if (this.isLoader) this.loadCodeImg();
  14.     },
  15.     alignErrorIcon: function() {
  16.         this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);
  17.     },
  18.     loadCodeImg: function() {
  19.         this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });
  20.     }
  21. })

以上代码中,定义了一个“类”,名字是: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,其全部代码为:

 
  1. Ext.define('SMS.view.Login',{
  2.     extend:'Ext.window.Window',
  3.     alias: 'widget.loginForm',
  4.     requires: ['Ext.form.*','SMS.view.CheckCode'],
  5.     initComponent:function(){
  6.         var checkcode = Ext.create('SMS.view.CheckCode',{
  7.             cls : 'key',
  8.             fieldLabel : '验证码',
  9.             name : 'CheckCode',
  10.             id : 'CheckCode',
  11.             allowBlank : false,
  12.             isLoader:true,
  13.             blankText : '验证码不能为空',
  14.             codeUrl: '/include/checkCode.asp',
  15.             width : 160
  16.         })
  17.         var form = Ext.widget('form',{
  18.             border: false,
  19.             bodyPadding: 10,
  20.             fieldDefaults: {
  21.                 labelAlign: 'left',
  22.                 labelWidth: 55,
  23.                 labelStyle: 'font-weight:bold'
  24.             },
  25.             defaults: {
  26.                 margins: '0 0 10 0'
  27.             },
  28.             items:[{
  29.                 xtype: 'textfield',
  30.                 fieldLabel: '用户名',
  31.                 blankText : '用户名不能为空',
  32.                 allowBlank: false,
  33.                 width:240
  34.             },{
  35.                 xtype: 'textfield',
  36.                 fieldLabel: '密   码',
  37.                 allowBlank: false,
  38.                 blankText : '密码不能为空',
  39.                 width:240,
  40.                 inputType : 'password' 
  41.             },checkcode],
  42.             buttons:[{
  43.                 text:'登录',
  44.                 handler:function(){
  45.                     
  46.                 }
  47.             },{
  48.                 text:'取消',
  49.                 handler:function(){
  50.                     
  51.                 }
  52.             }]
  53.         })
  54.         Ext.apply(this,{
  55.             height: 160,
  56.             width: 280,
  57.             title: '用户登陆',
  58.             closeAction: 'hide',
  59.             closable : false
  60.             iconCls: 'login',
  61.             layout: 'fit',
  62.             modal : true
  63.             plain : true,
  64.             resizable: false,
  65.             items:form
  66.         });
  67.         this.callParent(arguments);
  68.     }
  69. });

然后在主页面的代码中调用此LoginWindow。

 
  1. requires:['SMS.view.Login']
  2. var win;
  3. win = Ext.create('SMS.view.Login').show();

最后效果图:

抱歉!评论已关闭.