Number Fields and Input Masks


Ext JS 6.7 documents Ext.field.Number, xtype: numberfield, having a config for inputMask; though the documentation is actually incorrect. Looking at the code below is proper use when comparing it to the documentation.

    name : 'Fiddle',

    launch : function() {
        let mainview = Ext.create('Ext.field.Number', {
            label: 'Phone',
            placeholder: '(###) ###-####',
            inputMask: '(000) 000-0000'

Though running this code in Sencha Fiddle, you will see the following error when viewing the console.

ext-modern-all-debug.js:6877 [E] Ext.field.Number.initialize(): NumberFields cannot use input masks

The issue was reported to Sencha support as per the documentation you would expect this to be working. After going through various diagnosis issues it was revealed the issue is in the documentation as the code actually raises the error.

if (this.getInputMask()) {
   Ext.raise('NumberFields cannot use input masks');

Documentation sates this config was available since Ext JS 6.5.0.

inputMasks are powerful but also create some additional problems in coding for end users. An example is using inputMask for currency. What we need to focus on here is inputMask: ‘$00000.00’. When using an inputMask the user will need to enter the number of digits you specify in your inputMask. Ergo, if you are looking to use an inputMask to use varying numbers left of the decimal point, inputMask will not provide the solutions you are looking for. In order to accomplish this you would need to use a regular expression.

How the regular expression is applied varies depending upon how restrictive your regex is going to be. If you want want to simply restrict numbers only you could simply do the following:

maskRe: /[0-9]/

Should your restrictions need to be more complex this is a better solution in creating your own custom validation.

maskRe: /[0-9.-]/,
validator: function(v) {
    return /^-?[0-9]*(\.[0-9]{1,2})?$/.test(v)? true : 'Only positive/negative float (x.yy)/int formats allowed!';

So even if inputMask worked as documented there are still limitations in usage. Your best solutions are to use custom validators for complex field validation. Doing so will better satisfy your clients needs, allowing better client side data validation before being sent to the server for final data validation.


Author: aallord

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.