ExtJs Modern 6/7 – Making password fields revealable

There are a couple of ways one can create password fields in ExtJs 6/7:

1. Use the textfield component with its inputType set to password:
   https://docs.sencha.com/extjs/6.7.0/modern/Ext.field.Text.html#cfg-inputType
2. Or use a passwordfield directly:
   https://docs.sencha.com/extjs/6.7.0/modern/Ext.field.Password.html

There’s a distinct advantage though of using a passwordfield directly though. You can the revealable property which enables users to toggle on or off showing password in clear text:

A pretty-simple thing but buried deep down in the docs. For completeness sake, here’s a sample field config using this property:

{
    xtype: 'passwordfield',
    itemId: 'txtPassword',
    name: 'password',
    label: t('Password'),
    allowBlank: false,
    revealable: true,
}

Hopefully helps someone 🙂