ExtJS4图片验证码的实现
ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
转自:http://blog.sina.com.cn/s/blog_8d4bbd890100xaxh.html
上多少篇文章,重要学习了Extjs4 Grid的使用方法,从本篇开端,我们开始其余组件的学习,使用。在登录、注册甚至是发表文章或帖子的时候,都会用到验证码这个货色,那么在EXTJS 中,能够使用验证码功能么?谜底是确定的,在EXTJS4之前,也有良多验证码的实现,在Extjs4中,验证码到底如何实现呢?
临时,我们将验证码组件,命名为CheckCode。此组件继续自Ext.form.field.Text,在实现之前,我们须要写两个款式,分辨用来把持验证码的输入框跟验证码图片的大小。
CSS样式为:
- #CheckCode{ float:left;}
- .x-form-code{width:73px;height:20px;vertical-align:middle;cursor:pointer; float:left; margin-left:7px;}
记住这两个样式的定义,后面,我们会用到它。
验证码的JS代码:
- Ext.define('SMS.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() });
- }
- })
以上代码中,定义了一个“类”,名字是: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,其全部代码为:
- Ext.define('SMS.view.Login',{
- extend:'Ext.window.Window',
- alias: 'widget.loginForm',
- requires: ['Ext.form.*','SMS.view.CheckCode'],
- initComponent:function(){
- var checkcode = Ext.create('SMS.view.CheckCode',{
- cls : 'key',
- fieldLabel : '验证码',
- name : 'CheckCode',
- id : 'CheckCode',
- allowBlank : false,
- isLoader:true,
- blankText : '验证码不能为空',
- codeUrl: '/include/checkCode.asp',
- 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: '密 码',
- allowBlank: false,
- blankText : '密码不能为空',
- width:240,
- inputType : 'password'
- },checkcode],
- buttons:[{
- text:'登录',
- handler:function(){
- }
- },{
- text:'取消',
- handler:function(){
- }
- }]
- })
- Ext.apply(this,{
- height: 160,
- width: 280,
- title: '用户登陆',
- closeAction: 'hide',
- closable : false,
- iconCls: 'login',
- layout: 'fit',
- modal : true,
- plain : true,
- resizable: false,
- items:form
- });
- this.callParent(arguments);
- }
- });
而后在主页面的代码中调用此LoginWindow。
ExtJS4图片验证码的实现的更多相关文章
- 字符型图片验证码识别完整过程及Python实现
字符型图片验证码识别完整过程及Python实现 1 摘要 验证码是目前互联网上非常常见也是非常重要的一个事物,充当着很多系统的 防火墙 功能,但是随时OCR技术的发展,验证码暴露出来的安全问题也越 ...
- android图片验证码--自绘控件
自绘控件的内容都是自己绘制出来的 大致流程如下: 1.定义一个类继承view 使用TypedArray初始化属性集合 在view的构造方法中 有一个AttributeSet的参数 很明显是用来保存控件 ...
- webform(十)——图片水印和图片验证码
两者都需要引入命名空间:using System.Drawing; 一.图片水印 前台Photoshuiyin.aspx代码: <div> <asp:FileUpload ID=&q ...
- Android-简单的图片验证码
Android-图片验证码生成1.为啥要验证码?图片验证码在网络中使用的是比较普遍的.一般都是用来防止恶意破解密码.刷票.论坛灌水.刷页等.2.怎样的验证码比较好?验证码的获取方式无非就两种,一种是后 ...
- 在mvc中实现图片验证码的刷新
首先,在项目模型(Model)层中建立一个生成图片验证码的类ValidationCodeHelper,代码如下: public class ValidationCodeHelper { //用户存取验 ...
- Webform 文件上传、 C#加图片水印 、 图片验证码
文件上传:要使用控件 - FileUpload 1.如何判断是否选中文件? FileUpload.FileName - 选中文件的文件名,如果长度不大于0,那么说明没选中任何文件 js - f.val ...
- php 图片验证码生成 前后台验证
自己从前一段时间做了个php小项目,关于生成图片验证码生成和后台的验证,把自己用到的东西总结一下,希望大家在用到相关问题的时候可以有一定的参考性. 首先,php验证码生成. 代码如下: 1.生成图像代 ...
- python 识别图片验证码报IOError
说一下困扰了我一周的问题:识别图片验证码 本来我按照安装步骤(http://www.cnblogs.com/yeayee/p/4955506.html?utm_source=tuicool&u ...
- Atitit 图片 验证码生成attilax总结
Atitit 图片 验证码生成attilax总结 1.1. 图片验证码总结1 1.2. 镂空文字 打散 干扰线 文字扭曲 粘连2 1.1. 图片验证码总结 因此,CAPTCHA在图片验证码这一应用点 ...
随机推荐
- ecshop 进入后台登录帐号出现乱码解决方法
进入后台登录帐号出现如果生成乱码 MySQL server error report:Array ( [0] => Array ( [message] => MySQL Query Err ...
- linux(以ubuntu为例)下Android利用ant自动编译、修改配置文件、批量多渠道,打包生成apk文件
原创,转载请注明:http://www.cnblogs.com/ycxyyzw/p/4555328.html 之前写过一篇<windows下Android利用ant自动编译.修改配置文件.批量 ...
- android开发(50) Android透明状态栏。适用于 4.4 以上及 5.0以上设备
概述 有时候我们想在 andorid 手机上实现一种 跨越 顶部状态栏的效果,比如一张图片直接显示在 状态栏内.比如下图: 这个页面里有张图片,这个图片显示在整个页面的上部分.状态栏是 漂浮在这个图片 ...
- VirtualBox中安装CentOS-6.6虚拟机
1. 下载 可以到官网下载,http://mirror.centos.org/centos/ 如果下载速度太慢的话,也可以到163镜像下载: http://mirrors.163.com/centos ...
- nginx lua获取客户端ip
--获取客户端ip function get_client_ip() local headers=ngx.req.get_headers() local ip=headers["X-REAL ...
- 初识WEB:输入URL之后的故事【转】
转载一篇文章,分析的是浏览器输入url后所执行的一系列操作!写得非常清晰易懂,分享给大家! 作者:Jesse 出处:http://jesse2013.cnblogs.com/ 本文版权归作者和博客园共 ...
- POJ 1330 Nearest Common Ancestors
Nearest Common Ancestors Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14698 Accept ...
- WebKit中的Chrome 和 ChromeClient
原文地址:http://blog.csdn.net/dlmu2001/article/details/6208241 摘要: 浏览器的GUI接口分成两种,一种是控件的绘制,另一种则是同应用息息相关的窗 ...
- oracle 查询当前库中所有表以及某表字段信息
select utc.COLUMN_ID,utc.TABLE_NAME,utc.COLUMN_NAME,utc.DATA_TYPE||utc.DATA_LENGTH,utc.DATA_DEFAULT, ...
- php随机密码函数的实例代码
php随机密码函数的入门例子 时间:2015-12-16 20:42:48来源:网络 导读:php生成随机密码的函数实例,php生成随机密码的函数,生成数字.大小写字母与特殊字符组合的随机密码. ...