How to show/hide password in Ext.form.TextField

Question

could you please show me the solution to make the input text of password field show/hide when clicking another button?! I've tried to change the inputType property of that textfield, but it was rendered at that time so it didn't affect. Another way is create 2 textfields and visbile/invisible them, but I don't like do this, because it looks like cheating... Thank in advance.

Answer 1

Well this post is a little old, but I thought I'd answer it anyway. Maybe it will help someone else.

You are correct that after the item is rendered it's type has been set to 'password' in the DOM. Thus we need to directly manipuate the DOM. Let's say I window that has 1 item, a FormPanel, and I have 1 item in this FormPanel, a textfield. I initially set it's inpupType: 'password' in my config options. Now I want to change that. Here is what I would do:

this.get(0).getForm().get(1).getEl().dom.type = 'text'

(I assume that this is in an event handler that has the scope of my window)

That will change the DOM and immediately show my password as text. To change it back:

this.getForm().get(1).getEl().dom.type = 'password'

In a real world situation I would not use get(index), but either set a name for the textfield and use find, or I would create a var that points to the textfield.

Hope this helps someone.

Ricky

Answer 2

Yes,I too stumbled upon this. After digging in web I felt bad as there is no built in way to do this in the ext framework though it became more common requirement now days.

With the help of other people suggestions I implemented below one.

Fiddle is here https://fiddle.sencha.com/#view/editor&fiddle/25m2

Ext.tip.QuickTipManager.init();

Ext.create('Ext.form.Panel', {
    items: {
        xtype: 'fieldcontainer',

        layout: 'hbox',

        items: [{
            xtype: 'textfield',
            fieldLabel: 'Password',
            inputType: 'password',
            width: 300,
        }, {
            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()
});