ux.form.field.Verify 验证码控件
生活随笔
收集整理的這篇文章主要介紹了
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 验证码控件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cf皇龙戒指作用介绍 cf皇龙戒指属性详
- 下一篇： 一起秀直播怎么解除禁言 一起秀直播解除禁