1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    13
    Vote Rating
    0
    Nikolajtesla is on a distinguished road

      0  

    Default change inputtype in Ext.FormPanel from password to text

    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???

  2. #2
    Ext User
    Join Date
    Apr 2009
    Posts
    21
    Vote Rating
    0
    rob1308 is on a distinguished road

      0  

    Default


    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(1newField);
            
    // 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({
            
    labelWidth75,
            
    // label settings here cascade unless overridden
            
    url'save-form.php',
            
    frametrue,
            
    title'Simple Form',
            
    bodyStyle'padding:5px 5px 0',
            
    width350,
            
    defaults: {
                
    width230
            
    },
            
    defaultType'textfield',

            
    items: [{
                
    fieldLabel'First Name',
                
    name'first',
                
    allowBlankfalse
            
    },
            {
                
    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',
                
    handlerchangeFieldFunction
            
    }]
        });

        
    changeFieldForm.render(document.body); 

  3. #3
    Sencha User BitPoet's Avatar
    Join Date
    Sep 2008
    Location
    Bavaria
    Posts
    277
    Vote Rating
    1
    BitPoet is on a distinguished road

      0  

    Default


    Quote Originally Posted by rob1308 View Post
    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'

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      1  

    Default


    No, he's correct.

    Some browsers allow it, but they shouldn't.

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

  5. #5
    Ext User
    Join Date
    Apr 2009
    Posts
    21
    Vote Rating
    0
    rob1308 is on a distinguished road

      0  

    Default


    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.

  6. #6
    Ext User
    Join Date
    Apr 2009
    Posts
    21
    Vote Rating
    0
    rob1308 is on a distinguished road

      0  

    Default


    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.

  7. #7
    Sencha Premium Member
    Join Date
    Nov 2012
    Location
    Bangalore
    Posts
    79
    Vote Rating
    1
    rupamkhaitan is on a distinguished road

      1  

    Default can you help on this?

    can you help on this?


    In IE 10 production build it fails when we change directly as

    textfield.inputEl.dom.type = 'text'
    Quote Originally Posted by Animal View Post
    No, he's correct.

    Some browsers allow it, but they shouldn't.

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

Similar Threads

  1. Replies: 6
    Last Post: 17 Apr 2011, 11:15 AM
  2. Change inputType onblur
    By catapult in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 15 Mar 2011, 12:06 PM
  3. Dynamically update inputType from 'password' to 'text'
    By grilltout in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 13 Jun 2008, 4:49 AM

Thread Participants: 4

Tags for this Thread