Change inputType onblur

[catapult]

Is it possible to change a textfields input type?

I would like to show a login box with two textfields. The first textfield accepts either an email or a username. I have an blur listener on this field that validates if it is a valid email. If it is the user can just enter a plaintext reference in the second textfield to login. If it isn't a valid email I want to be able to change the second textfields inputType to password so the user can enter their password an have it hidden.

I can change the textfield objects inputType property from "text" to "password" and see the change in firebug. I have tried calling doLayout() after the change but this doesn't seem to work.

Any help gratefully received.

[sanjoyroy]

{
fieldLabel: 'Password',
name: 'account_password',
id: 'account_password',
width: 100,
inputType:'text',
value: '".$acc_password."'
},{
xtype: 'button',
name: 'password_button',
id: 'password_button',
enableToggle : true,
iconCls: 'lock',
width: 50,
text: 'Show Password',
toggleHandler: function(btn, st){
if(!st){
Ext.getCmp('password_button').setText('Show Password');
Ext.getCmp('password_button').setIconClass('lock');
Ext.getCmp('account_password').getEl().dom.setAttribute('type','password');
Ext.getCmp('account_password').getEl().addClass('x-form-password');
}else{
Ext.getCmp('password_button').setText('Hide Password');
Ext.getCmp('password_button').setIconClass('unlock');
Ext.getCmp('account_password').getEl().dom.setAttribute('type','text');
Ext.getCmp('account_password').getEl().addClass('x-form-text');
}
}
}

[catapult]

Thanks for that mate I will give it a try.

[TheCoderZ]

You can buy a PHP script from www.iharmi.elementfx.com that generates JavaScript code to handle input fields, both text and password, and textareas.

It works for the most common browsers such as Chrome, IE, Firefox, Opera and Safari.

There's a video example that shows you how to use it