ux.form.field.Password 密码与非密码状态切换

效果如图：

扩展源码：

//扩展
//密码按钮扩展
//支持在密码与非密码之间切换
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: 0;
            background: none !important;

            .x-btn-icon-el-default-small {
                color: black;
            }
        }
    }
}
/*#endregion*/