Show Hide Password field using Extjs

Hello,

Today,  I would like to write a small example of How to show or hide the password filed using Sencha Extjs.

It is very simple just we have to write make the input type changes like a password to text or text to the password.

Example:

Ext.tip.QuickTipManager.init();

Ext.create('Ext.form.Panel', {

    items: {

        xtype: 'fieldcontainer',

        width: '100%',

        layout: {

            type: 'hbox'

        },

        items: [{

            width: '90%',

            xtype: 'textfield',

            name: 'password',

            msgTarget: 'under',

            allowBlank: false,

            fieldLabel: 'Password' + '<span style="color:red">*</span>',

            inputType: 'password'

        }, {

            xtype: 'button',

            iconCls: 'fa fa-eye',

            tooltip: 'Show password',

            handler: function (button) {

                var isShowPassword = this.iconCls==='fa fa-eye';

                this.setTooltip(isShowPassword?'Hide password':'Show password');

                this.setIconCls(isShowPassword?'fa fa-eye-slash':'fa fa-eye');

                this.prev().getEl().query('input', false)[0].set({'type':isShowPassword?'text':'password'})

            }

        }]

    

    

    },
renderTo: Ext.getBody()
});

OutPut: