View Full Version : how to show password by click button

18 Mar 2011, 9:03 AM

I created a pop win for changing user password. How can I do if I want to show hidden password by click a button. It means how can I change inputType by code.

code below,

items: [{
fieldLabel: "Login ID",
name: "txtLoginID",
allowBlank: false,
anchor: '100%',
disabled: true
}, {
fieldLabel: 'Old Password',
allowBlank: false,
name: 'txtOldPassword',
anchor: '100%' //
, {
fieldLabel: 'New Password',
allowBlank: false,
name: 'txtPassword',
anchor: '100%' //
}, {
xtype: 'textarea',
fieldLabel: 'Comments',
allowBlank: false,
name: 'txtDescription',
height: 80,
anchor: '100%' //


Many thanks

5 Jun 2011, 11:18 AM
I'm looking for something similair but only for Ext 4.
It doesn't seem possible without hiding the current field and showing another normal textfield.
Other ideas are welcome! ;)


5 Jun 2011, 12:59 PM
Think I finally nailed it. Not the best solution, but it seems to work. I'm using arrTmp = Ext.DomQuery.select('input[name=txtOldPassword]') which returns an array. And then alter arrTmp.type='text'.
Warning: this for Ext 4 (!), but probably something similair exists for Ext 3.

5 Jun 2011, 6:19 PM
I don't think there's any need to resort to selectors or direct interaction with DOM nodes:

var passwordField = new Ext.form.TextField({
inputType: 'password',
renderTo: Ext.getBody()

new Ext.Button({
enableToggle: true,
renderTo: Ext.getBody(),
text: 'Show Password',
toggleHandler: function(button, state) {
passwordField.getEl().set({type: state ? 'text' : 'password'});

For ExtJS 4 you'll need to update the namespaces and use the inputEl property instead of getEl().

28 Jun 2013, 5:51 AM
I know it's an old post but I want to do the same and I have a problem. It works fine on Safari/Chrome/Firefox, but not on IE (Windows8)
Any idea about how to make it work?