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

Question

Could you show me how to make password entry text hidden by clicking another button? I tried to change the inputType property of this text box, but it was displayed at that time, so it did not affect. Another way is to create 2 text fields and visbile / invisible them, but I don't like to do this because it seems like a hoax ... Thanks in advance.

Answer 1

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

You are right that after the element has been rendered, its type has been set to “password” in the DOM. Thus, we need to directly manipulate the DOM. Let's say I have a window that has 1 element, a FormPanel, and I have 1 element in this FormPanel, a text box. I initially set it inpupType: "password" in my settings. Now I want to change that. Here is what I will do:

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

(I assume this is in an event handler that has an area of ​​my window)

This will change the DOM and immediately display my password as text. To change it:

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

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

Hope this helps someone.

Ricky

Answer 2

Yes, I also came across this. After digging on the net, I felt bad because there is no built-in way to do this within ext, although now it has become a more common requirement.

Using the recommendations of other people, which I followed below.

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