[ACCEPTED]-How do I force the display of a decimal in an ExtJS NumberField to a certain precision?-extjs3

Accepted answer
Score: 14

As this was the top result for a search 14 query about forcing decimals in a NumberField, thought 13 I would update this for those using ExtJS 12 4+

The input filtering since ExtJS 4 has 11 been delegated to a valueToRaw function, the 10 setValue function used is actually from 9 Ext.form.field.Text, so that's what I'm 8 overriding below.

I also decided to have 7 the forcing of displaying decimals to be 6 an option ('forcePrecision') configurable 5 per NumberField, which means the override 4 will look like this:

Ext.override(Ext.form.NumberField, {
    forcePrecision : false,

    valueToRaw: function(value) {
        var me = this,
            decimalSeparator = me.decimalSeparator;
        value = me.parseValue(value);
        value = me.fixPrecision(value);
        value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));
        if (isNaN(value))
        {
          value = '';
        } else {
          value = me.forcePrecision ? value.toFixed(me.decimalPrecision) : parseFloat(value);
          value = String(value).replace(".", decimalSeparator);
        }
        return value;
    }
});

To use this in your 3 form, you'd instantiate it like this:

{
  xtype: 'numberfield',
  name:  'decimalsfield',
  forcePrecision: true,     #defaults to false
  decimalPrecision: 3       #defaults to 2
}

Fields 2 not instantiated with forcePrecision: true behave exactly like 1 the default.

Score: 11

The popular solution didn't work for me. In 14 fact the code in the solution is an exact 13 duplicate of the EXT JS 3.3 source code 12 which, for me, displays "1" instead of "1.00" when 11 decimalPrecision is 2. Based on the popular 10 solution's suggestion to override setValue, this 9 is what I did:

Ext.override(Ext.form.NumberField, {
    setValue: function(v) {
        var dp = this.decimalPrecision;
        if (dp < 0 || !this.allowDecimals) {
            dp = 0;
        }
        v = this.fixPrecision(v);
        v = Ext.isNumber(v) ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
        v = isNaN(v) ? '' : String(v.toFixed(dp)).replace(".", this.decimalSeparator);
        return Ext.form.NumberField.superclass.setValue.call(this, v);
    }
});

Even though the fixPrecision 8 code seems to format the number with the 7 desired precision, javascript would lose 6 the precision during the manipulation it 5 does on the two lines before the call to 4 the superclass's setValue function. Setting 3 the precision with toFixed when it is finally 2 converted to a String made it work.

Good 1 luck!

Score: 9

either extend :

var myNumberField = Ext.extend(Ext.form.NumberField, {
        setValue : function(v){
            v = typeof v == 'number' ? v : String(v).replace(this.decimalSeparator, ".");
            v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
            //  if you want to ensure that the values being set on the field is also forced to the required number of decimal places.
            // (not extensively tested)
            // v = isNaN(v) ? '' : this.fixPrecision(String(v).replace(".", this.decimalSeparator));
            return Ext.form.NumberField.superclass.setValue.call(this, v);
        },
        fixPrecision : function(value){
            var nan = isNaN(value);
            if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
               return nan ? '' : value;
            }
            return parseFloat(value).toFixed(this.decimalPrecision);
        }
    });

...
...

items: [new myNumberField({
        id  : 'net',
        fieldLabel: 'Net Sales',
        allowBlank:false,
        decimalPrecision:2
    }),

or override, and that will effect all 3 numberfields in your application:

Ext.override(Ext.form.NumberField, {
    setValue : function(v){
            v = typeof v == 'number' ? v : String(v).replace(this.decimalSeparator, ".");
        v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
        return Ext.form.NumberField.superclass.setValue.call(this, v);
    },
    fixPrecision : function(value){
        var nan = isNaN(value);
        if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
           return nan ? '' : value;
        }
        return parseFloat(value).toFixed(this.decimalPrecision);
    }
})

items: [{
        xtype   : 'numberfield',
        fieldLabel: 'Net Sales',
        allowBlank:false,
        decimalPrecision:2
    },

EDIT

Notice 2 the commented section in the first setValue 1 method.

Score: 2

Best bet is probably to add a listener to 3 the blur event for it, and then use the 2 built in Javascript .toFixed(2) function 1 on the value of the field.

Score: 1

The option decimalPrecision definition is: "The 4 maximum precision to display after the decimal 3 separator (defaults to 2)"

There is no option 2 to force the format, you problably have 1 to override NumberField class.

Score: 0

if you want something like below:

enter 50 2 > u got 50

50.10 > 50.10

50.123 > 50.12

Try 1 this:

, setValue: function (v) {
      if ( !v || isNaN(v)) {
        v = '';
      }
      else if (v % 1 != 0) {    //means number is not whole number
        v = this.fixPrecision(String(v).replace(".", this.decimalSeparator));
      }

     return Ext.form.NumberField.superclass.setValue.call(this, v);
}
, fixPrecision: function (value) {
    if (!this.allowDecimals || this.decimalPrecision == -1) {
       return value;
    }

    return parseFloat(value).toFixed(this.decimalPrecision);
}
Score: 0

This code works great for me. It wont work 2 with out the "ValueToRow" override 1 in ExtJS 4.2.0.

var myNumberField = Ext.extend(Ext.form.NumberField, {
    setValue : function(v){
        v = typeof v == 'number' ? v : String(v).replace(this.decimalSeparator, ".");
        v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
        return Ext.form.NumberField.superclass.setValue.call(this, v);
    },
    fixPrecision : function(value){
        var nan = isNaN(value);
        if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
        return nan ? '' : value;
        }
        var val = parseFloat(value).toFixed(this.decimalPrecision);
        return val;
    },
    valueToRaw: function(value) {
        var me = this,
        decimalSeparator = me.decimalSeparator;
        value = me.parseValue(value);
        value = me.fixPrecision(value);
        value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));
        value = isNaN(value) ? '' : String(value).replace('.', decimalSeparator);
        return me.fixPrecision(value);
    }
});

...
...
items: [new myNumberField({
        id  : 'net',
        fieldLabel: 'Net Sales',
        allowBlank:false,
        decimalPrecision:2
    })

Reference: How to keep the trailing zeros in Ext.form.field.Number ?

More Related questions