ux.form.field.Verify 验证码控件
1 //验证码控件 2 Ext.define('ux.form.field.Verify', { 3 extend: 'Ext.container.Container', 4 alias: ['widget.fieldVerify'], 5 requires: ['Ext.Img', 'Ext.form.field.Text'], 6 layout: { 7 type: 'hbox', 8 align: 'stretch' 9 }, 10 config: { 11 //文本框内刷新按钮 12 refresh: false, 13 //文本框 14 textfield: { 15 hideLabel: true, 16 emptyText: '请输入验证码' 17 }, 18 //图片 19 img: { 20 flex: 1, 21 height: 53, 22 margin: '0 0 0 2', 23 alt: '点击刷新' 24 } 25 }, 26 //初始化 27 initComponent: function () { 28 var me = this; 29 me.callParent(arguments); 30 //新增 31 me.add([me.getTextfield(), me.getImg()]); 32 }, 33 //创建文本框 34 applyTextfield: function (config) { 35 return Ext.factory(config, Ext.form.field.Text, this.getTextfield()); 36 }, 37 //创建图片 38 applyImg: function (config) { 39 return Ext.factory(config, Ext.Img, this.getImg()); 40 }, 41 //更新图片 42 updateImg: function (newItem, oldItem) { 43 if (newItem) { 44 //隐藏就不显示验证码 45 if (!this.isHidden()) { 46 newItem.setSrc(this.codeImgUrl); 47 } 48 newItem.on({ 49 scope: this, 50 click : { 51 element : 'el', 52 fn :'onRefreshImg' 53 } 54 }); 55 } 56 }, 57 //更新文本框内置按钮 58 updateRefresh: function (newItem, oldItem) { 59 if (newItem) { 60 var textfield = this.getTextfield(); 61 newItem.handler = 'onRefreshImg'; 62 newItem.scope = this; 63 textfield.setTriggers({ refresh: newItem}); 64 } 65 }, 66 setHidden: function (value) { 67 var me = this, 68 allowBlank = true, 69 back; 70 back = me.callParent(arguments); 71 if (!value) { 72 me.onRefreshImg(); 73 allowBlank = false; 74 } 75 me.getTextfield().setAllowBlank(allowBlank); 76 return back; 77 }, 78 //刷新验证码 79 onRefreshImg: function () { 80 if (!this.isHidden()) { 81 var img = this.getImg(); 82 img.setSrc(this.codeImgUrl + '?time=' + new Date().getTime()); 83 } 84 } 85 });
相关sass:
.password-trigger,.auth-email-trigger,.auth-password-trigger,.auth-envelope-trigger {&:before {top: 10px;left: -18px;position: relative;color: $dialog-trigger-color;font-size: 30px;}&.password-trigger:before,&.auth-password-trigger:before {content: "\f023";}&.auth-email-trigger:before {content: "\f007";}&.auth-envelope-trigger:before {content: "\f0e0";}}
用法:
1 xtype: 'fieldVerify', 2 //验证码地址 3 codeImgUrl: config.codeImg, 4 //文本框配置 5 textfield: { 6 name: 'captcha', 7 msgTarget: 'qtip' 8 }, 9 //文本框内置按钮 10 refresh: { 11 cls: 'auth-envelope-trigger fa-refresh' 12 }
ux.form.field.Verify 验证码控件相关推荐
- ux.form.field.SearchField 列表、树形菜单查询扩展
1 //支持bind绑定store 2 //列表搜索扩展,支持本地查询 3 //支持树形菜单本地一级菜单查询 4 Ext.define('ux.form.field.SearchField', { 5 ...
- ux.form.field.Year 只能选年的时间扩展
效果如图,亲测6.2.1版本可用,用法同时间选择控件 1 //只选择年的控件 2 Ext.define('ux.picker.Year', { 3 extend: 'Ext.Component', 4 ...
- .NET下的验证码控件John.Controls.ValidateCode2V for .NET beta1
预告下一个作品是选项卡John.Controls.TabularMultiView for .NET(难产ing,由于最近要处理的事情很多,身体上也有点不支,发布时间推迟) 注册了帐号好几久,都没发过 ...
- [ASP.NET 控件实作 Day28] 图形验证码控件
在网页上常把图形验证码应用在登入或贴文的页面中,因为图形验证码具有机器不易识别的特性,可以防止机器人程序恶意的存取网页.在本文中将实作一个图形验证码的服务器控件,透过简单的属性设定就可以轻易地在网页上 ...
- Android拼图滑块验证码控件
大咖好,博主毕业工作半年多了.今天给大噶呈献博主博客处女作--Android拼图滑块验证码控件.由于初写博客,很多地方可能不够好,望各位多多给点意见.工作半年才送出第一篇博客很惭愧555. 概述 验证 ...
- Android 滑动拼图验证码控件
Android 滑动拼图验证码控件 简介: 很多软件为了安全防止恶意攻击,会在登录/注册时进行人机验证,常见的人机验证方式有:谷歌点击复选框进行验证,输入验证码验证,短信验证码,语音验证,文字按顺序选 ...
- 小视频app源码,Android 滑动拼图验证码控件
小视频app源码,Android 滑动拼图验证码控件 代码实现: 滑块视图类:SlideImageView.java.实现小视频APP源码随机选取拼图位置,对拼图位置进行验证等功能. public c ...
- ASP.NET下英文及中文汉字的验证码控件
本文转自http://bbs.msproject.cn/Default.aspx?g=posts&t=660 翻译 Nataraj K. 著Image Verifier - Custom Co ...
- 雕虫小技--验证码控件
转:http://www.cnblogs.com/wmj/archive/2008/04/17/1158662.html 主题 雕虫小技--自定义"验证码"控件 "验证 ...
最新文章
- sersync 同步
- linux c获得时间和设置时间
- 编译原理实验一预习报告
- 深入探讨 java.lang.ref 包
- RxDownload2 文件下载太慢分析
- 进程间通信(匿名管道)
- 【OS学习笔记】三十二 保护模式九:分页机制对应的汇编代码之---内核代码
- physx选择显卡还是cpu_99块钱买啥显卡?PUBG吃鸡60fps+的缩水版“GTX1050”3GB游戏实测...
- python高性能写法_python高性能编程方法一
- x86_64-linux-gnu/libgdk-x11-2.0.so: error adding symbols: DSO missing from command line
- Android 加载网页进度条
- 科学计算机imissyou,imissyou是什么意?imissyou – 手机爱问
- 实验二线性表的链式存储结构
- 7个技巧帮助你进行更有吸引力的脉动/脉搏调查
- groovy-时间转换
- python 存储bmp格式图片
- 网安零基础学习-python-面向对象编程(灰帽编程15)
- SpaceVim图标及部分字符显示乱码
- Yii2日志使用方法
- 华为p10手机安装linux,matebookD安装linux系统总结
热门文章
- Linux下shellcode的编写
- vue项目的实用配置
- hdu 1561 The more, The Better 树形dp
- Nginx的nginx.conf配置文件中文注释说明
- Activity之间跳转的效果_overridePendingTransition
- PHP - PDO 之 mysql 参数绑定
- require(),include(),require_once()和include_once()区别
- C#的Winform多语言实现(resx文件)
- Remoting实例(同为客户端服务端)
- 基于AFNetworking的封装的工具类