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

//验证码控件
Ext.define('ux.form.field.Verify', {
    extend: 'Ext.container.Container',
    alias: ['widget.fieldVerify'],
    requires: ['Ext.Img', 'Ext.form.field.Text'],
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    config: {
        //文本框内刷新按钮
        refresh: false,
        //文本框
        textfield: {
            hideLabel: true,
            emptyText: '请输入验证码'
        },
        //图片
        img: {
            flex: 1,
            height: 53,
            margin: '0 0 0 2',
            alt: '点击刷新'
        }
    },
    //初始化
    initComponent: function () {
        var me = this;
        me.callParent(arguments);
        //新增
        me.add([me.getTextfield(), me.getImg()]);
    },
    //创建文本框
    applyTextfield: function (config) {
        return Ext.factory(config, Ext.form.field.Text, this.getTextfield());
    },
    //创建图片
    applyImg: function (config) {
        return Ext.factory(config, Ext.Img, this.getImg());
    },
    //更新图片
    updateImg: function (newItem, oldItem) {
        if (newItem) {
            //隐藏就不显示验证码
            if (!this.isHidden()) {
                newItem.setSrc(this.codeImgUrl);
            }
            newItem.on({
                scope: this,
                click : {
                    element : 'el',
                    fn :'onRefreshImg'
                }
            });
        }
    },
    //更新文本框内置按钮
    updateRefresh: function (newItem, oldItem) {
        if (newItem) {
            var textfield = this.getTextfield();
            newItem.handler = 'onRefreshImg';
            newItem.scope = this;
            textfield.setTriggers({ refresh: newItem});
        }
    },
    setHidden: function (value) {
        var me = this,
            allowBlank = true,
            back;
        back = me.callParent(arguments);
        if (!value) {
            me.onRefreshImg();
            allowBlank = false;
        }
        me.getTextfield().setAllowBlank(allowBlank);
        return back;
    },
    //刷新验证码
    onRefreshImg: function () {
        if (!this.isHidden()) {
            var img = this.getImg();
            img.setSrc(this.codeImgUrl + '?time=' + new Date().getTime());
        }
    }
});

相关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";
        }
    }

用法：

            xtype: 'fieldVerify',
            //验证码地址
            codeImgUrl: config.codeImg,
            //文本框配置
            textfield: {
                name: 'captcha',
                msgTarget: 'qtip'
            },
            //文本框内置按钮
            refresh: {
                cls: 'auth-envelope-trigger fa-refresh'
            }