1. #1
    Ext User
    Join Date
    Apr 2008
    Posts
    2
    Vote Rating
    0
    grilltout is on a distinguished road

      0  

    Talking Dynamically update inputType from 'password' to 'text'

    Hello everybody, this is my first post.

    I've made a form with a textfield with inputtype="password" and I would like to change inputtype to "text" in order to display the "password" in clear instead of "********".

    I'm using a simple textfield defined like this :
    {items:[{xtype:"textfield",name:"pass",id:"pass",inputType: 'password'}]}, {items:[{xtype:"button", text:"***", handler: function(){ Ext.getCmp("pass").inputType='text'; }}]}

    The property inputType is successfully changed by the handler but the display still the same : "*********"

    I've tried to Hide/Unhide the textfield but nothing changed...

    I've tried some other "things" but nothing really clean.

    PS : I'm french so escuse me for any fault i've made in my post.

    Thanks in advance for any help !

  2. #2
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    83
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default

    You're going to have to change it at the element level, not at the component level.

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,555
    Vote Rating
    60
    Animal will become famous soon enough Animal will become famous soon enough

      0  

    Default

    Ext.getCmp returns the javascript Component Object

    getEl() is the standard method of Component which returns its Ext.Element.

    Now, do some research about how to change attibutes of the dom element that an Ext.Element encapsulates.

  4. #4
    Ext User
    Join Date
    Apr 2008
    Posts
    2
    Vote Rating
    0
    grilltout is on a distinguished road

      0  

    Default

    first, sorry for the delay of my reply and thanks for your hints.

    I've tested different kind of code/method and the only way i've found (to satisfy compatibility condition) is to have two fields :
    - one with type="password" that is showed by default
    - a second with type="text" that is hidden by default

    on a button click i copy values then hide the first field and show the second one...

    This is dirty (in my own opinion) but this is working with ie, ff and opera.

    now the code i've made (note that i'm using as much as i can extjs functions)

    main javascript (just an extract because it's veryyyyy long)

    ...
    {items:[
    {xtype:"textfield",name:"pass",id:"pass",inputType: 'password'},
    {xtype:"textfield",name:"passclear",id:"passclear",inputType: 'text',hidden: true}
    ]},
    ...

    function Toggle_Pass_visibility(){
    var pass_field=Ext.getCmp("pass");
    var pass_field_clear=Ext.getCmp("passclear");

    if ( pass_field.hidden==false ) {
    pass_field_clear.setValue(pass_field.getValue());
    pass_field.hide();
    pass_field_clear.show();
    }
    else {
    pass_field.setValue(pass_field_clear.getValue());
    pass_field.show();
    pass_field_clear.hide();
    }
    }

    maybe someone will have any idea that could improve/clean that pretty dirty code.

Thread Participants: 2