ux.form.field.Verify 验证码控件

Posted 2020-07-26 魔狼再世

 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             }