How To Restrict Extjs Textfield To Accept Only Numbers Using Maskre . (should Accept Positive , Negative , Integer And Decimal Numbers.)

I need to configure my ExtJs textfield to accept only numbers which can be positive , negative , integer and decimals upto 2 decimals . I tried with maskeRe and regular expression

Solution 1:

Change your maskRe to

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!';
},

The point is that you allow some chars using maskRe (not the value itself) and validate the string input within the validator.

Pattern details:

• ^ - start of string
• -? - an optional hyphen
• [0-9]* - zero or more digits
• (\.[0-9]{1,2})? - an optional sequence of
  • \. - a dot
  • [0-9]{1,2} - any 1 or 2 digits
• $ - end of string.

Update

You may enforce to revert to a previous value if the input value is not matching the regex. See the full snippet below:

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.form.Panel', {
            title: 'maskRe',
            width: 600,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'textfield',
                fieldLabel: 'Enter Postive or Negative integer or decimal No.',
                width : 600,
                labelWidth : 300,
                anchor: '100%',
                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!';
                },
                listeners: {
                    change: function(e, text, prev) {
                        if (!/^-?[0-9]*(\.[0-9]{0,2})?$/.test(text)) 
                        {   
                            this.setValue(prev);
                        }
                    }
                }
            }],
        });
    }
});

The change event is added to the field listeners and if the value does not match /^-?[0-9]*(\.[0-9]{0,2})?$/ regex (similar to the validation regex, but allows a dot without a digit right after to allow further input), the value is reverted with this.setValue(prev).

Solution 2:

you can use this property xtype: 'numberfield', it will accept all type of number. For decimal value, we can use decimalPrecision:2.

Try It, if a code will not work then please provide me your code. So that I can suggest you the best solution.

All the best :)

Solution 3:

He left this way of doing it, in case someone is doing it this way they can serve

Only Letters:

<ext:TextFieldID="tfname"FieldLabel="Name"MaskRe="([a-zA-Z])"runat="server" ></ext:TextField>

Only Numbers:

<ext:TextFieldID="tfnumber"FieldLabel="Number"MaskRe="([0-9])"runat="server" ></ext:TextField>

accept all previous:

<ext:TextFieldID="tfname"FieldLabel="Name"MaskRe="([a-zA-Z0-9])"runat="server" ></ext:TextField>