Development Technologies

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

Monthly Archives: March 2011

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.