Dynamically changing TextField inputType for 'Hide my Typing' text field

[littlefixit]

Hello,

I am implementing a 'hide my typing' checkbox into a form where the user enters an answer to a password reset question into a textbox. I would like them to be able to click the checkbox, and then have it flip the text field (that they may have already entered text into) from 'text' to 'password' or vice-versa. I belive I've been able to change the inputType option, but I can't figure out how to get it to render at all. Any thoughts/suggestions? An excerpt from my code is below:

      var resetForm = new Ext.form.FormPanel({
             id: 'resetform',
             url: 'process.php',
             // standardSubmit: true,                                                                              
             frame: true,
             width: '475',
             items: [{ 
               title: 'Password Reset Question',
               xtype:'fieldset',                
            autoHeight:true,                
            collapsed: false,
            html: question                                                     
          },{
                 xtype:'fieldset',                 
                 autoHeight:true,                
                 defaults: {width: 300},
                 defaultType: 'textfield',
                 collapsed: false,           
                 items :[{                          
                         id: 'forgot_password_answer',
                         fieldLabel: 'Your Answer',
                         inputType: 'password',
                         name: 'answer',
                         allowBlank:false                 
                     },{
                         inputType: 'hidden',
                         name: 'username',
                         value: resetusername
                     },{
                         inputType: 'hidden',
                         name: 'subresetquestion',                         
                         value: '1'
                     }]
                     
             }]           
      });

      var fbar_qwin = new Ext.Toolbar({
          buttonAlign: 'left',
          width: '400',          
          items: [{
              xtype: 'checkbox',
              boxLabel: 'Hide my typing',
              id: 'hidetypecheckbox',              
              checked: true,
              handler: function() {
                  // alert(this.getValue());
                  var field = Ext.get("forgot_password_answer");
                if(field.getValue() == 1){                  
                      field.inputType: 'password'
                }else{
                    field.inputType: 'text'
                }                  
                }                 
          },{
              xtype: 'panel',
              width: '275',              
              border: false,
              hidden: false
          },{
              text:'Answer',
              handler: function() {
              resetForm.getForm().submit({
                     waitMsg: 'Verifying Answer...',        // Wait Message
                    success: function (f,a) {        // When saving data success                    
                        // location.href='index.php';                                                                        
                    },
                    failure: function (f,a) {        // when saving data failed
                        Ext.MessageBox.alert (a.result.errortype,a.result.text);
                    }
                });
              }
          }]
      });
      
      var qwin = new Ext.Window({
           layout: 'fit',
           id:'autoload-win',
           width: 475,
           height: 190,
           autoScroll:true,
           resizable: false,
           closable: false,
           draggable: false,
           // title: 'Login',
           items: [resetForm],
           buttons: fbar_qwin,
              keys: [{
                  key: [Ext.EventObject.ENTER],
                  handler: function(){
                  resetForm.getForm().submit({
                         waitMsg:'Verifying Answer...',        // Wait Message
                        success: function (f,a) {        // When saving data success
                              // location.href='index.php';                      
                        },
                        failure: function (f,a) {        // when saving data failed
                            Ext.MessageBox.alert (a.result.errortype,a.result.text);
                        }
                    });
                  }
              }]       
      });
      
        qwin.show();

In fbar_qwin, I've successfully been able to use an 'alert()' to echo out the value of the checkbox within the checkbox's handler, but I just can't get it to toggle what I want.

[feyyaz]

my suggestion would be to add two fields one textedit and one for password. initaly hide the password field by config, on the checkbox event i would switch visibility and copy the value field.

[littlefixit]

I'll give it a try, thanks.