Question

我在ExtJs 4中有一个文本字段掩码。可以找到here

有人能指出我在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: '#####-###'
}

您必须使用'＃'声明掩码。

ExtJs 6文本字段的输入掩码

1 个答案: