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());
}
}
});

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