change inputtype in Ext.FormPanel from password to text

I have a formpanel where depend of user action i need to change inputtype from password to text.
Can someone help me, how i can do this???

Hi Nikolaj

You will have to destroy or hide and disable the field you want to replace - in your case the password field.
Depending on whether you need the field again.
If you do need it again in the same page depending on user action - disable it (so as not to submit it with the form) and hide it.

The below example you can add onto the dynamic.js file in the examples/form directory or you can copy it and run it from the console in Firebug if you are familiar with that.

This code will run the changeFieldFunction when you click the button.
It will find the "password" field which is at index 1 of the form, destroy it, and then insert a "newField" at the same location.
When this has been inserted it finally calls the forms doLayout() method to re-render itself including the newField.

Hope it helps.

R.

PHP Code:

---

    /*
     * ================  Changing field form  =======================
     */ 
 
 
 //Define the handler to be used by the change field button
    function changeFieldFunction() {
        //Define the new field
        newField = new Ext.form.TextField({
            fieldLabel: 'New Field'
        });
        // end of newField

        // Get the item you want to destroy
        changeFieldForm.items.items[1].destroy();
        // then insert the newField at the same index
        changeFieldForm.insert(1, newField);
        // then call the forms doLayout method to make it redraw itself with the new field included.
        changeFieldForm.doLayout();
    };
    // end of changeFieldFunction

    changeFieldForm = new Ext.FormPanel({
        labelWidth: 75,
        // label settings here cascade unless overridden
        url: 'save-form.php',
        frame: true,
        title: 'Simple Form',
        bodyStyle: 'padding:5px 5px 0',
        width: 350,
        defaults: {
            width: 230
        },
        defaultType: 'textfield',

        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        },
        {
            fieldLabel: 'Password',
            inputType: 'password',
            id: 'password',
            name: 'password'
        },
        {
            fieldLabel: 'Company',
            name: 'company'
        },
        {
            fieldLabel: 'Email',
            name: 'email',
            vtype: 'email'
        },
        new Ext.form.TimeField({
            fieldLabel: 'Time',
            name: 'time',
            minValue: '8:00am',
            maxValue: '6:00pm'
        })],

        buttons: [{
            text: 'Change Password field to New Field',
            handler: changeFieldFunction
        }]
    });

    changeFieldForm.render(document.body); 


---

Quote:

---

Originally Posted by rob1308

You will have to destroy or hide and disable the field you want to replace - in your case the password field.
Depending on whether you need the field again.

---

Sorry, but that's not true. Changing the field type between text and password is an operation on the underlying HTML element that every browser supports, so it's sufficient to assign the correct type like: field.el.dom.type = 'password'

No, he's correct.

Some browsers allow it, but they shouldn't.

Changing an input from password to text is a security problem.

Thanks BitPoet -

Knowledgable and useful as ever!
Awesome tip !

Means I can refactor some recent code! I had looked at this same problem a few weeks ago and finding nothin on the Ext Forums I found this tip and worked on from there.

http://stackoverflow.com/questions/2...eld-in-ext-3-0

Thanks for your info.

R.

Oops - had replied before I read Animal's post --
Thanks for the heads up. .
Maybe the refactoring can be swept under the proverbial!

Cheers Animal,

R.