Development Technologies

Software development tutorials, experiences and resources from developers in the day-to-day

Number field with currency symbol, thousand separator and international support

There are so many people asking about a NumberField with ExtJS that allows them to add some aditional formatting to the numbers so i was using an extension  that i found in the extjs forums but there were some unnecessary code – that i think, it was added because it was developed for an older version of ExtJS – so i decided to start from scratch my own class and add just the code for the functionality what i need.
1. Currency Symbol (by default is $), if you don’t need a currency symbol just set the config option to null or empty string:

currencySymbol: null

To change the currency after the field was created you should use the function setCurrencySymbol.

2. Thousand separator with support for international format, you can use comma (,) or (.). If decimalSeparator is (,) then thousand separator will be (.) by default decimalSeparator is (.) and thousand separator (,).  Also you cand hide thousand separator using the config option:

useThousandSeparator: false

There are also a functions for setDecimalPrecision and setDecimalSeparator.

3. Display always all the decimals from the given decimal precision value the default value for this config option is:

alwaysDisplayDecimals: false

If you are changing the properties after the field is created and don’t want or you can’t use the functions for any reason you must call updateNumberFormat function.

Here is an screenshot where you can see the diffent values formatted using the extension:

Numeric Field

Hope you like it.

Greivin Britton

The source code is available here.

15 responses to “Number field with currency symbol, thousand separator and international support

  1. Inespe March 10, 2011 at 3:53 pm

    great work man, thank you VERY much! 🙂

  2. Brian April 18, 2011 at 1:14 pm

    How would this handle a ‘ ‘ (space) as a thousands separator? It’s not a common convention but a few countries use it.

  3. Dan April 20, 2011 at 6:22 am

    Outstanding, thank you!

  4. John May 10, 2011 at 3:07 pm

    That is exactly what I was looking for! Thanks!

  5. David May 31, 2011 at 8:38 am

    Hi,
    nice work, two small things: if property “useThousandSeparator” is false, no formatting is done at all (for those outside the USA), simply add else-construct in method “getFormattedValue”.
    NumberField-Property “selectOnFocus” does not work any more, please add functionality to onFocus-Event.

    Greetings,
    David

  6. shepparddean July 28, 2011 at 4:06 pm

    Thanks, great extension. I’ve been looking for this for awhile now.

  7. brittongr July 28, 2011 at 7:28 pm

    To all of you, thanks for the comments…

  8. Andrew September 15, 2011 at 7:56 pm

    Great job! Free to use anywhere? license?

  9. Pavan November 18, 2012 at 9:28 am

    Can you let me know how to do I use large numbers in Numberfield. Something like 99999999999999999999.99

  10. Omid Shariati November 17, 2013 at 7:07 am

    I wrote another one. it just support thousandSeparator. you can find it on https://github.com/omids20m/Ext.override.ThousandSeparatorNumberField

  11. mdesign83 June 20, 2014 at 2:02 pm

    Updated ExtJS 4.2.1 version


    /**
    * ExtJS CurrencyField
    * Updated version of https://develtech.wordpress.com/2011/03/06/number-field-with-currency-symbol-thousand-separator-with-international-support/#respond
    *
    * Settings configurable via default Ext.util.Format properties:
    * Ext.util.Format.currencyAtEnd = false;
    * Ext.util.Format.currencyPrecision = 2;
    * Ext.util.Format.currencySign = '$ ';
    * Ext.util.Format.thousandSeparator = ',';
    * Ext.util.Format.decimalSeparator = '.';
    */
    Ext.define('Ext.ux.CurrencyField', {
    extend: 'Ext.form.field.Text',
    alias: ['widget.currencyfield','widget.currency'],
    maskRe: /[0-9 .,-]/,
    fieldStyle: 'text-align: right;',
    onFocus: function(){
    this.setRawValue(this.removeFormat(this.getRawValue()));
    },
    onBlur: function(){
    if (this.hasFormat()) {
    this.setRawValue(Ext.util.Format.currency(this.getRawValue()));
    }
    },
    setValue: function(v){
    this.setRawValue(Ext.util.Format.currency(v));
    },
    removeFormat: function(v){
    if (Ext.isEmpty(v) || !this.hasFormat()) {
    return v;
    } else {
    v = v.replace(Ext.util.Format.currencySign, '');
    v = !Ext.isEmpty(Ext.util.Format.thousandSeparator) ? v.replace(new RegExp('[' + Ext.util.Format.thousandSeparator + ']', 'g'), '') : v;
    v = Ext.isEmpty(Ext.util.Format.decimalSeparator) ? v.replace(new RegExp('[' + Ext.util.Format.decimalSeparator + ']', 'g'), '') : v;
    return v;
    }
    },
    hasFormat: function(){
    return Ext.util.Format.thousandSeparator != '.' || !Ext.isEmpty(Ext.util.Format.currencySign) || Ext.util.Format.currencyPrecision > 0;
    },
    processRawValue: function(val) {
    return this.removeFormat(val);
    }
    });

    • brittongr June 21, 2014 at 12:13 am

      Hi mdesign83 thanks for sharing. I’m just curious about why you decided to inherit from field.Text instead field.Number.

      • mdesign83 June 23, 2014 at 4:43 am

        Its arbitary. I’m not using number functions like trigger, so i doesn’t need to define and handle numberfield exceptions (hideTrigger: true, keyNavEnabled: false, mouseWheelEnabled: false, triggerfunctions, etc)

Leave a reply to David Cancel reply