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