效果如图:
扩展源码:
//扩展
//密码按钮扩展
//支持在密码与非密码之间切换
Ext.define('ux.form.field.Password', {
extend: 'Ext.form.field.Text',
xtype: 'passFile',
requires: ['Ext.form.trigger.Component'],
//禁止自动填充
autoComplete: 'off',
inputType: 'password',
//自定义样式
cls: 'password',
triggers: {
cutoverButton: {
type: 'component',
//只读时隐藏,此功能未测试
hideOnReadOnly: true,
preventMouseDown: false
}
},
/**
* @private 创建切换按钮
*/
applyTriggers: function(triggers) {
var me = this,
triggerCfg = triggers.cutoverButton;
//增加切换按钮
if (triggerCfg) {
triggerCfg.component = Ext.apply({
xtype: 'button',
ownerCt: me,
//加入小图标
iconCls: 'x-fa fa-eye',
id: me.id + '-triggerButton',
ui: me.ui,
listeners: {
scope: me,
click: me.onCutoverClick
}
});
return me.callParent([triggers]);
}
// <debug>
else {
Ext.raise(me.$className + ' requires a valid trigger config containing "button" specification');
}
// </debug>
},
onCutoverClick: function(t) {
var type = 'password',
iconCls = 'x-fa fa-eye';
if (!t.isText) {
type = 'text';
iconCls = 'x-fa fa-lock';
}
t.isText = !t.isText;
//切换图标
t.setIconCls(iconCls);
//切换输入框类型
this.inputType = type;
this.inputEl.dom.type = type;
}
});
/*#region 自定义密码控件*/
.password {
.x-form-trigger { .x-btn-default-small {
border:;
background: none !important; .x-btn-icon-el-default-small {
color: black;
}
}
}
}
/*#endregion*/