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'
             }