problems with password field in EXT 3.0

Question

I am having problems with a password field because it doesn't shows properly the emptytext that I pass through the config object, here is my code:

                            {xtype: 'textfield',    
    inputType: 'password',
    emptyText: '//Password',
    width: 200}

the problem is that the EmptyText looks like a password too and users can't read it. Please helpme with this, thanks in advance.

Abel

Answer 1

Hello Abel

You cant easily do what you want with the default Ext.form.TextField component.

Normally, Ext will use <input type="text" /> , but when inputType is set to 'password', it uses an <input type="password" /> field instead.

When you supply an emptyText field, all it does is pre-populate the field with the emptyText (ie: value="emptyText") and adds a CSS className to make the text dull.

When the field is blank, or the value in the field is the same as emptyText, the field is considered to be blank.

Anyway, to do what your asking for, you'll have to extend TextField, and to some trickery to mimic the behavior.

Effectively, when the text value is emptyText, hide the password field, and show a normal text field.

Answer 2

Another solution that will work for modern browsers is to use the new HTML5 placeholder attribute on your input field. You'll have to either extend Ext.form.TextField to add this as a config option, or manipulate the DOM after render to add it. (personally, I think adding placeholder as a config option should be added to the Ext JS library)