Input mask for ExtJs 6 textfield

Question

I have a textfield mask in ExtJs 4. It can be found here

Can anyone point me in the direction of a textmask example in ExtJs6.

Answer 1

I've wrote a simple masked textfield for ExtJS 6.2. All you need to do is to create a file called MaskedField.js and paste the following code:

Ext.define('Ext.field.MaskedField', {
    extend: Ext.field.Text,
    alias: 'widget.maskedfield',
    config: {
        label: '',
        mask: null,
        defaultDateFormat: 'm/d/Y'
    },

    initialize: function() {
        const me = this;

        me.callParent();

        if (Ext.String.trim(me.config.mask) != "") me.setMaxLength(me.config.mask.length);
    },

    listeners: {
        change: function(textfield, newValue, oldValue, eOpts) {
            if (newValue instanceof Date) newValue = Ext.Date.format(newValue, textfield.config.defaultDateFormat);
            if (isFinite(newValue)) newValue = String(newValue);
            if (oldValue && newValue.length < oldValue.length) return; // Backspace pressed

            let mask = textfield.config.mask;
            if (!mask) return; // Avoid auto-bind error
            let mf = mask.split('');
            let vf = newValue.replace(/[^0-9]/g, '').split(''); // Mask for numbers only
            let index = 0;
            mf.map((m, i) => {
                if (m === '#') {
                    mf[i] = vf[index++];
                }
            });

            let value = '';
            for (m of mf) {
                if (m) {
                    value += m;
                } else {
                    break;
                }
            }

            textfield.suspendEvent('change');
            textfield.setValue(value);
            textfield.resumeEvent('change');
        }
      }
});

This component does not validates any kind of data. It only gives user the ability to type with automatic masking.

You can't use numbers as part of the mask (it only accepts special characters, spaces and letters). The mask '## 9###' will fail, but '## A###' will work fine!

You can use this component as follows:

{
  xtype: 'maskedfield',
  name: 'birthday',
  label: 'Your birthday',
  mask: '##/##/####',
  defaultDateFormat: 'd/m/Y' // Same format as Ext.Date
},
{
  xtype: 'maskedfield',
  name: 'phone',
  label: 'Your cellphone',
  mask: '(##) #####-####'
},
{
  xtype: 'maskedfield',
  name: 'postalcode',
  label: 'Postal code',
  mask: '#####-###'
}

You must declare the mask using '#'.