Change text field to password field dynamically in IE8

[JesusJoseph]

Hi All,
I need to change text field to password field dynamically in IE8
When the user select a checkbox I need to clear the text field contents and then when the user start entering the values in the text field it has to show only *** and not the real text (which is the behavior of password field) .

I know we can do this by two fields (text field and password field) and then show/hide the fields based on the condition.
But is there is any other way to do this using a single text field by changing some properties of the text field.

This command is working in Firefox and not in IE
var passwordField = Ext.getCmp('password');
passwordField.getEl().dom.setAttribute('type', 'password');

Also I tried the below but non are working

1. passwordField.inputEl.dom.type = 'password';
2. passwordField.xtype = 'password';
3. passwordField.inputType = 'password';

Any idea will be appreciated

Thanks
Joseph

[Kachopsticks]

Instead of trying to change a regular form field to be a password field, I would try creating both a password field and a form field. Set the the password field's hidden and disabled properties to be true (just being hidden does not disable the field) so when you present your form you just have one field. When the user selects the text CheckBox, listen for the 'check' event to show the hidden and disabled password field, and in the same function, show and enable your password field. I use a similar implementation to switch between two grids. I have not tested this code, but this might do what you need.

 onRender: function(ct, position){
        GLOBAL.yourForm.superclass.onRender.call(this, ct, position);
        this.checkBox.mon(this.checkBox, 'check', this.togglePasswordFields, this);
        this.passwordField.hide();
        this.passwordField.disable();
},
togglePasswordFields{
        this.clearMyFields();//call a function to clear your fields or just do it on the  individual fields
        if(this.checkBox.getValue()){
                   this.regularField.hide();
                   this.regualrField.disable();
                   this.passwordField.show();
                   this.passwordField.enable);
}
else{
                   this.regularField.show();
                   this.regualrField.enable();
                   this.passwordField.hide();
                   this.passwordField.disable();
}
},

Hope this helps.

[Kachopsticks]

This is a cleaner way. Just replace the previous this.togglePasswordFields function.

togglePasswordFields: function(checked){
        this.clearMyFields();//call a function to clear your fields or just do it on the  individual fields
                   this.regularField.setVisible(!checked);
                   this.regularField.setDisabled(checked);
                   this.passwordField.setVisible(checked);
                   this.passwordField.setDisabled(!checked);


}