CODEWITHSUNDEEP
extjs
Raúl Garcia
Raúl Garcia

Reputation: 302

Sencha 6.5.2 (Modern) Numberfield with decimalSeparator

I have a numberfield which need have only two decimals and comma like decimalSeparator, following the documentation had fill the numberfield with the data i put next:

         {
            xtype: 'numberfield',
            margin: '5 0 5 0',
            allowDecimals: true,
            decimalPrecision: 2,
            decimalSeparator: ',',
            minValue: 0.01,
            step: 0.01
         }

When i try write '2,2' the numberfield don't leave me put a comma and the numberfield have a precision validation of 3, instead of two.

Also i had tried change global prototype of Ext.field.Number, but didn't work to:

    Ext.field.Number.prototype.thousandSeparator = '.';
    Ext.field.Number.prototype.decimalSeparator = ',';

Anyone can help me? I can't use a textfield, because i need cordova display number pad.

Thanks!!

Upvotes: 0

Views: 2041

Answers (2)

Raúl Garcia
Raúl Garcia

Reputation: 302

Well i found the problem of NumberField on sencha. NumberField and SpinnerField format not work on mobile, that is because when is mobile sencha establish a input with type number , wh chrome and cordova engine not work with comma support.

So if you need display a numeric keyboard on cordova engine or need made number support for a mobile device, you must override a class put some variables, i put here a example and maybe @Leandro Fantinel can made a fiddle.

Ext.util.Format.thousandSeparator = '.';
Ext.util.Format.decimalSeparator = ',';

Ext.define('jsclient.view.articleCheck.decimalNumber.DecimalEuropeNumber11122', {
    extend: 'Ext.field.Number',
    alias: 'widget.decimalNumber',

    requires: [
        'Ext.field.Number'
    ],

    inputType: 'text',
    decimals: 2,

    listeners: {
        initialize: function (_this, eOpts) {
            //This attribute make that cordova display a numeric number
            _this.element.dom.querySelector("input").setAttribute("inputmode", "numeric");
        },

        change: function (_this, eOpts, value, oldValue) {
            var objRegExp = /^\d+\.\d{0,2}$/;
            if (objRegExp.test(oldValue) && !objRegExp.test(value)) {
                _this.setValue(oldValue);
            }
        },

    }
});

Upvotes: 0

Leandro Fantinel
Leandro Fantinel

Reputation: 53

In Modern use:

use 

Ext.util.Format.thousandSeparator = '.';
Ext.util.Format.decimalSeparator = ',';

And use 'spinnerfield' instead of 'numberfield'

{
    xtype: 'spinnerfield',
    anchor: '100%',
    fieldLabel: 'Numbers',
    margin: '5 0 5 0',

    // decimalPrecision: 2,   /*classic property*/
    // decimalSeparator: ',', /*classic property*/
    // allowDecimals: true,   /*classic property*/
    decimals: 2,

    // step: 0.01 /*classic property*/
    stepValue: 0.01,

    minValue: 0.01
}

see fiddle: https://fiddle.sencha.com/#fiddle/2nlo

Upvotes: 2

Related Questions