Dynamically update inputType from 'password' to 'text'

[grilltout]

Hello everybody, this is my first post.

I've made a form with a textfield with inputtype="password" and I would like to change inputtype to "text" in order to display the "password" in clear instead of "********".

I'm using a simple textfield defined like this :
{items:[{xtype:"textfield",name:"pass",id:"pass",inputType: 'password'}]}, {items:[{xtype:"button", text:"***", handler: function(){ Ext.getCmp("pass").inputType='text'; }}]}

The property inputType is successfully changed by the handler but the display still the same : "*********"

I've tried to Hide/Unhide the textfield but nothing changed...

I've tried some other "things" but nothing really clean.

PS : I'm french so escuse me for any fault i've made in my post.

Thanks in advance for any help !

[jay@moduscreate.com]

You're going to have to change it at the element level, not at the component level.

[Animal]

Ext.getCmp returns the javascript Component Object

getEl() is the standard method of Component which returns its Ext.Element.

Now, do some research about how to change attibutes of the dom element that an Ext.Element encapsulates.

[grilltout]

first, sorry for the delay of my reply and thanks for your hints.

I've tested different kind of code/method and the only way i've found (to satisfy compatibility condition) is to have two fields :
- one with type="password" that is showed by default
- a second with type="text" that is hidden by default

on a button click i copy values then hide the first field and show the second one...

This is dirty (in my own opinion) but this is working with ie, ff and opera.

now the code i've made (note that i'm using as much as i can extjs functions)

main javascript (just an extract because it's veryyyyy long)

...
{items:[
{xtype:"textfield",name:"pass",id:"pass",inputType: 'password'},
{xtype:"textfield",name:"passclear",id:"passclear",inputType: 'text',hidden: true}
]},
...

function Toggle_Pass_visibility(){
var pass_field=Ext.getCmp("pass");
var pass_field_clear=Ext.getCmp("passclear");

if ( pass_field.hidden==false ) {
pass_field_clear.setValue(pass_field.getValue());
pass_field.hide();
pass_field_clear.show();
}
else {
pass_field.setValue(pass_field_clear.getValue());
pass_field.show();
pass_field_clear.hide();
}
}

maybe someone will have any idea that could improve/clean that pretty dirty code.