Changing the input type of a field to text from passworfd in Ext JS

Question

I am new to Ext JS, i do have a password field and a SHOW button adjacent to it. Need to convert the masked password to text field when clicked on SHOW. Currently we just display the password in another pop up window when clicked on SHOW. How do i get the field password in order to change its xtype to text form password?

Form.js

{xtype: 'displayfield', value: 'Password&nbsp;', width: '16%', style: 'text-align: right', preventMark: 'true'},
                    {
                        xtype: 'textfield',
                        name: 'password', 
                        inputType: 'password',
                        cls: 'textfield-with-border'
                    },
                    {
                        xtype: 'button',
                        text: 'Show',
                        buttonAlign: 'left',
                        formBind: true,
                        handler: this.onShowPassword,
                        style: 'margin-left: 5px',
                        cls: '',
                        scope: this
                    },

onShowPassword : function(btn, ev) {
        var x = this.getForm().findField('password');
        x.xType = "text";
}

Previous onShowPassword() function is :

onShowPassword : function(btn, ev) {
        
        //encode form values into JSON data
        var jsonUpdate = Ext.util.JSON.encode(fields);
        
        //Encoding for the password for html to take it as a plain text
        var encodedPassword = Ext.util.Format.htmlEncode(fields.password);
                
        Ext.Ajax.request({
            scope: this,
            url: this.urlBase + 'xyz',
            headers: this.createTokenHeader(),
            method: 'POST',
            jsonData: jsonUpdate,
            success: function(response){
                //decode JSON response
                var form = Ext.decode(response.responseText);
                Ext.Msg.alert("info", "Password is: "+encodedPassword);
                    setTimeout(function(){
                        Ext.Msg.hide();
                    },15000);
                            
            },
            failure: function(response){
                var error = Ext.decode(response.responseText);
                Ext.Msg.alert("Error", "Some error occurred while showing the password, please try again after some time");
            }
        });     
    },

Tried code: (Did not work)

var x = this.getForm().findField('password');
var passwordFieldDom = x.getEl().dom;      
var typeAttribute = (passwordFieldDom.type === 'password'? 'text': password');
this.getForm().findField('password').getEl().dom.type === typeAttribute;

The above code does change the type from password to text but it does not reflect on the UI as non masked password, after this the password still comes in masked.

I need to make change in onShowPassword(). Let me know how can i do that.

Which toolkit are you using: classic or morder? Which versions of ExtJs? — Arthur Rubens

Arthur Rubens Arthur Rubens · Accepted Answer · 2020-06-24T09:48:30

Something like this:

Ext.onReady(function () {
    var formPanel = new Ext.form.FormPanel({
        title: "Sample Form",
        padding: 5,
        items: [{
            xtype: 'textfield',
            fieldLabel: "Password",
            name: 'password',
            value: "Some Password",
            inputType: 'password',
            cls: 'textfield-with-border'
        }, {
            xtype: 'button',
            text: 'Show',
            buttonAlign: 'left',
            formBind: true,
            handler: this.onShowPassword,
            style: 'margin-left: 5px',
            cls: '',
            scope: this,
            handler: function (btn, ev) {
                var passwordFieldDom = btn.previousSibling().getEl().dom;
                var typeAttribute = (passwordFieldDom.getAttribute('type') === 'password' ? 'text' : 'password');
                passwordFieldDom.setAttribute('type', typeAttribute);
                setTimeout(function () {
                    passwordFieldDom.setAttribute('type', 'password');
                }, 2000); // 2 seconds
            }
        }],
        renderTo: Ext.getBody()
    });
});

Fiddle

Changing the input type of a field to text from passworfd in Ext JS

1 Answers