Hello,
Today, I would like to write a small example of How to show or hide the password filed using Sencha Extjs.
It is very simple just we have to write make the input type changes like a password to text or text to the password.
Example:
Ext.tip.QuickTipManager.init();
Ext.create('Ext.form.Panel', {
items: {
xtype: 'fieldcontainer',
width: '100%',
layout: {
type: 'hbox'
},
items: [{
width: '90%',
xtype: 'textfield',
name: 'password',
msgTarget: 'under',
allowBlank: false,
fieldLabel: 'Password' + '<span style="color:red">*</span>',
inputType: 'password'
}, {
xtype: 'button',
iconCls: 'fa fa-eye',
tooltip: 'Show password',
handler: function (button) {
var isShowPassword = this.iconCls==='fa fa-eye';
this.setTooltip(isShowPassword?'Hide password':'Show password');
this.setIconCls(isShowPassword?'fa fa-eye-slash':'fa fa-eye');
this.prev().getEl().query('input', false)[0].set({'type':isShowPassword?'text':'password'})
}
}]
},
renderTo: Ext.getBody()
});
OutPut:
