注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

山林客

简单不一定幸福,但幸福其实可以很简单。

 
 
 

日志

 
 
关于我

2004年毕业于中山大学,毕业后专注于网站开发和网络工程技术。先后取得SCWCD、CCNP认证,对Asp/Java有丰富的开发经验,对网络工程也有较深的研究。真诚欢迎大家多多指教、多多指点、多多指正,共同分享IT道路和人生道路上的喜怒哀乐。

网易考拉推荐

ExtJs4 实现验证码输入框  

2011-11-23 13:27:33|  分类: Extjs4 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

ExtJs是目前网上很流行的一套JS框架,之前的版本大家都已经很熟悉,并且网上也有大量的案例可供参考。但是,由于ExtJs4发布不久,而且其变化之大并不是简单的升级就可以完成的。可以说,ExtJs4与之前的版本完全不同,其升级过程就如同ejb2到ejb3,无论从内核还是到使用都已经发生了革命性的变化。AH-BILL近期也在对其进行学习,先将一些学习成果跟大家分享。

今天向大家展示的是带验证码的输入框实现。

我在网上看到了有其他网友的实现方式,他是继承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
        }) ;



 

 

  评论这张
 
阅读(2102)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018