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

您必须使用“#”声明掩码。