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

转自:http://blog.sina.com.cn/s/blog_8d4bbd890100xaxh.html

   

上多少篇文章,重要学习了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:pointer; float:left; margin-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. if (this.isLoader) this.loadCodeImg();
  13. },
  14. alignErrorIcon: function() {
  15. this.errorIcon.alignTo(this.codeEl, 'tl-tr', [2, 0]);
  16. },
  17. loadCodeImg: function() {
  18. this.codeEl.set({ src: this.codeUrl + '?id=' + Math.random() });
  19. }
  20. })
 

以上代码中,定义了一个“类”,名字是: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. text:'取消',
  48. handler:function(){
  49. }
  50. }]
  51. })
  52. Ext.apply(this,{
  53. height: 160,
  54. width: 280,
  55. title: '用户登陆',
  56. closeAction: 'hide',
  57. closable : false,
  58. iconCls: 'login',
  59. layout: 'fit',
  60. modal : true,
  61. plain : true,
  62. resizable: false,
  63. items:form
  64. });
  65. this.callParent(arguments);
  66. }
  67. });
 

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

ExtJS4图片验证码的实现的更多相关文章

  1. 字符型图片验证码识别完整过程及Python实现

    字符型图片验证码识别完整过程及Python实现 1   摘要 验证码是目前互联网上非常常见也是非常重要的一个事物,充当着很多系统的 防火墙 功能,但是随时OCR技术的发展,验证码暴露出来的安全问题也越 ...

  2. android图片验证码--自绘控件

    自绘控件的内容都是自己绘制出来的 大致流程如下: 1.定义一个类继承view 使用TypedArray初始化属性集合 在view的构造方法中 有一个AttributeSet的参数 很明显是用来保存控件 ...

  3. webform(十)——图片水印和图片验证码

    两者都需要引入命名空间:using System.Drawing; 一.图片水印 前台Photoshuiyin.aspx代码: <div> <asp:FileUpload ID=&q ...

  4. Android-简单的图片验证码

    Android-图片验证码生成1.为啥要验证码?图片验证码在网络中使用的是比较普遍的.一般都是用来防止恶意破解密码.刷票.论坛灌水.刷页等.2.怎样的验证码比较好?验证码的获取方式无非就两种,一种是后 ...

  5. 在mvc中实现图片验证码的刷新

    首先,在项目模型(Model)层中建立一个生成图片验证码的类ValidationCodeHelper,代码如下: public class ValidationCodeHelper { //用户存取验 ...

  6. Webform 文件上传、 C#加图片水印 、 图片验证码

    文件上传:要使用控件 - FileUpload 1.如何判断是否选中文件? FileUpload.FileName - 选中文件的文件名,如果长度不大于0,那么说明没选中任何文件 js - f.val ...

  7. php 图片验证码生成 前后台验证

    自己从前一段时间做了个php小项目,关于生成图片验证码生成和后台的验证,把自己用到的东西总结一下,希望大家在用到相关问题的时候可以有一定的参考性. 首先,php验证码生成. 代码如下: 1.生成图像代 ...

  8. python 识别图片验证码报IOError

    说一下困扰了我一周的问题:识别图片验证码 本来我按照安装步骤(http://www.cnblogs.com/yeayee/p/4955506.html?utm_source=tuicool&u ...

  9. Atitit 图片 验证码生成attilax总结

    Atitit 图片 验证码生成attilax总结 1.1. 图片验证码总结1 1.2. 镂空文字  打散 干扰线 文字扭曲 粘连2 1.1. 图片验证码总结 因此,CAPTCHA在图片验证码这一应用点 ...

随机推荐

  1. ecshop 进入后台登录帐号出现乱码解决方法

    进入后台登录帐号出现如果生成乱码 MySQL server error report:Array ( [0] => Array ( [message] => MySQL Query Err ...

  2. linux(以ubuntu为例)下Android利用ant自动编译、修改配置文件、批量多渠道,打包生成apk文件

    原创,转载请注明:http://www.cnblogs.com/ycxyyzw/p/4555328.html  之前写过一篇<windows下Android利用ant自动编译.修改配置文件.批量 ...

  3. android开发(50) Android透明状态栏。适用于 4.4 以上及 5.0以上设备

    概述 有时候我们想在 andorid 手机上实现一种 跨越 顶部状态栏的效果,比如一张图片直接显示在 状态栏内.比如下图: 这个页面里有张图片,这个图片显示在整个页面的上部分.状态栏是 漂浮在这个图片 ...

  4. VirtualBox中安装CentOS-6.6虚拟机

    1. 下载 可以到官网下载,http://mirror.centos.org/centos/ 如果下载速度太慢的话,也可以到163镜像下载: http://mirrors.163.com/centos ...

  5. nginx lua获取客户端ip

    --获取客户端ip function get_client_ip() local headers=ngx.req.get_headers() local ip=headers["X-REAL ...

  6. 初识WEB:输入URL之后的故事【转】

    转载一篇文章,分析的是浏览器输入url后所执行的一系列操作!写得非常清晰易懂,分享给大家! 作者:Jesse 出处:http://jesse2013.cnblogs.com/ 本文版权归作者和博客园共 ...

  7. POJ 1330 Nearest Common Ancestors

    Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 14698   Accept ...

  8. WebKit中的Chrome 和 ChromeClient

    原文地址:http://blog.csdn.net/dlmu2001/article/details/6208241 摘要: 浏览器的GUI接口分成两种,一种是控件的绘制,另一种则是同应用息息相关的窗 ...

  9. oracle 查询当前库中所有表以及某表字段信息

    select utc.COLUMN_ID,utc.TABLE_NAME,utc.COLUMN_NAME,utc.DATA_TYPE||utc.DATA_LENGTH,utc.DATA_DEFAULT, ...

  10. php随机密码函数的实例代码

    php随机密码函数的入门例子 时间:2015-12-16 20:42:48来源:网络 导读:php生成随机密码的函数实例,php生成随机密码的函数,生成数字.大小写字母与特殊字符组合的随机密码.   ...