Маска ввода для текстового поля ExtJs 6

Question

У меня есть маска текстового поля в ExtJs 4. Это можно найти здесь

Может кто-нибудь указать мне в направлении примера текстовой маски в ExtJs6.

Answer 1

Я написал простое замаскированное текстовое поле для ExtJS 6.2. Все, что вам нужно сделать, это создать файл с именем MaskedField.js и вставьте следующий код:

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');
        }
      }
});

Этот компонент не проверяет какие-либо данные. Это только дает пользователю возможность печатать с автоматической маскировкой.

Вы не можете использовать числа как часть маски (она принимает только специальные символы, пробелы и буквы). Маска '## 9###' потерпит неудачу, но '## A###' будет работать нормально!

Вы можете использовать этот компонент следующим образом:

{
  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: '#####-###'
}

Вы должны объявить маску, используя '#'.