PDA

View Full Version : How to change fieldType from a textfield from password to text



ssamuel68
15 Oct 2013, 7:01 AM
Hi,

I got a textfield with the fieldType: 'password'. I want to click a checkbox to change the fieldType of the textfield to text and show the password.

Here is my code:


this.items = {
xtype: 'form',
border: false,
defaultType: 'textfield',
style: { padding: '15px 15px 0 15px' },
defaults: {
anchor: '100%',
labelWidth: 170,
allowBlank: false,
maxLength: 45,
},
items: [
{
name: 'oldpwd',
inputType: 'password',
fieldLabel: 'Current Password'
},
{
name: 'newpwd',
inputType: 'password',
fieldLabel: 'New Password'
},
{
name: 'repeatpwd',
inputType: 'password',
fieldLabel: 'Repeat New Password'
},
{
xtype: 'checkbox',
style: {marginLeft: '175px'},
boxLabel: 'Show password',
handler: function(cmp, checked) {
console.log(checked);
if (checked) {
cmp.up('form').down('textfield').inputType = 'text';
} else {
cmp.up('form').down('textfield').inputType = 'password';
}


}
}
]
};


This is not working

cmp.up('form').down('textfield').inputType = 'text';

What should I do here?

Thx
Sam

eric.cook
15 Oct 2013, 7:40 AM
Your first problem is trying to set the inputType on the field component itself. This does not work. The inputType config is only used to construct the field; it does not truly persist once the field exists. You need to access the input element of the field.



cmp.up('form').down('textfield').inputEl.dom.type = 'text';


However, this does not always work (specifically in old IE/Firefox, maybe other browsers). To have a cross-browser solution, you simply need to give the user the appearance of changing the input type. There are many ways to do this, but I think the simplest would be to create a hidden text field with the same configuration as the password field and switch between fields on checkbox click.



items: [
{
name: 'oldpwd',
itemId: 'oldpwd',
inputType: 'password',
fieldLabel: 'Current Password'
},
{
name: 'oldpwd',
itemId: 'oldpwdshow',
fieldLabel: 'Current Password',
hidden: true
},
{
name: 'newpwd',
itemId: 'newpwd',
inputType: 'password',
fieldLabel: 'New Password'
},
{
name: 'newpwd',
itemId: 'newpwdshow',
fieldLabel: 'New Password',
hidden: true
},
{
name: 'repeatpwd',
itemId: 'repeatpwd',
inputType: 'password',
fieldLabel: 'Repeat New Password'
},
{
name: 'repeatpwd',
itemId: 'repeatpwdshow',
fieldLabel: 'Repeat New Password',
hidden: true
},
// checkbox config
]


Note the addition of itemIds to make selection easier. You can probably figure out the checkbox handler, but it should be a simple process of setting the values of the fields to show, then hiding and showing the appropriate fields. You may have to tweak the form submit as well.

ssamuel68
15 Oct 2013, 8:09 AM
Thx eric.cook
(http://www.sencha.com/forum/member.php?339076-eric.cook)
The code you show it to me did the work

cmp.up('form').down('textfield').inputEl.dom.type = 'text';

However I'm going to test on the other browsers this first solution. If it not works in all browsers I think Im going with your second solution and and a listener on each textfield for the keypress to duplicate the values for the hidden fields

Thx again.
Sam

ssamuel68
21 Oct 2013, 2:20 PM
Finally I use this code:


items: [
{
name: 'oldpwd',
inputType: 'password',
fieldLabel: 'Current Password'
},
{
name: 'password',
inputType: 'password',
fieldLabel: 'New Password'
},
{
name: 'repeatpwd',
inputType: 'password',
fieldLabel: 'Repeat New Password'
},
{
xtype: 'checkbox',
style: {marginLeft: '175px'},
boxLabel: 'Show password',
handler: function(cmp, checked) {
var form = cmp.up('form').getForm();
if (checked) {
form.findField('oldpwd').inputEl.dom.type = 'text';
form.findField('password').inputEl.dom.type = 'text';
form.findField('repeatpwd').inputEl.dom.type = 'text';
} else {
form.findField('oldpwd').inputEl.dom.type = 'password';
form.findField('password').inputEl.dom.type = 'password';
form.findField('repeatpwd').inputEl.dom.type = 'password';
}
}
}
]


But it doesn't work on IE < 9....