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
March 6, 2011
Posted by on 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:
Hope you like it.
Greivin Britton
The source code is available here.
great work man, thank you VERY much! 🙂
How would this handle a ‘ ‘ (space) as a thousands separator? It’s not a common convention but a few countries use it.
Yes, i updated the code a few months ago to support that…
Outstanding, thank you!
That is exactly what I was looking for! Thanks!
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
ok, i will check it out..
Thanks, great extension. I’ve been looking for this for awhile now.
To all of you, thanks for the comments…
Great job! Free to use anywhere? license?
Can you let me know how to do I use large numbers in Numberfield. Something like 99999999999999999999.99
I wrote another one. it just support thousandSeparator. you can find it on https://github.com/omids20m/Ext.override.ThousandSeparatorNumberField
Updated ExtJS 4.2.1 version
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Ext.ux.CurrencyField.js
hosted with ❤ by GitHub
Hi mdesign83 thanks for sharing. I’m just curious about why you decided to inherit from field.Text instead field.Number.
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)