maskRe ExtJS 6.0.2

Question

I'm simply trying to limit the user to input a number between 1 and 6. So my codes is:

{
        xtype            : 'textfield',
        id               : 'NUMBER',
        width            : '100%',
        fieldLabel       : "NUMBER",
        dataIndex        : 'NUMBER',
        maxLength        : 1,
        value            : 0,
        regex            : /[0-6\/]/,
        maskRe           : /[0-6]/,
        enforceMaxLength : true,
        readOnly         : true,
        mandatory        : true,
}

For some reason i can input any number from 1 to 9 (although i get the invalid form error). Also, since the starting value is 0 for some reason i can add a number before him, allowing me for example to input "90".

So my final question is, "Why doesn't my "maskRe" works properly"?

Answer 1

Your code, sans the readOnly:true, is working in a fiddle for me; so I am not sure why it doesn't work for you.

You can find the fiddle here; note that I tested in most recent Chrome only.

Answer 2

You are looking for:

{
  xtype: 'numberfield',
  label: 'Age',
  minValue: 1,
  maxValue: 6,
  name: 'age'
}

Regarding maskRe, they say:

maskRe : RegExp An input mask regular expression that will be used to filter keystrokes > (character being typed) that do not match. Note: It does not filter characters > already in the input.

so a maskRe of /[1-6]/ will just let user enter 1 to 6 chars but will not invalidate the 0 already in and will not impose a length restriction.