Number field with currency symbol, thousand separator with international support

[brittongr]

Hi, i just created an extension of NumberField that allows you to create number fields with aditional features like:

Update 16/03/2011

The text in red are no longer valid.
No longer need functions to update the format.
No more $ by default.
Thousand separator allows any character including blank space (' ').
Improved getFormattedValue function and other code, now is more clean and short.

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.
No more $ by default, if you need it set up manually by using the config option like before: currencySymbol: $.

2. Thousand separator, you can use comma (,) or (.) any character. If decimalSeparator is (,) then thousand separator will be (.) when thousandSeparator use default value. 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

.

4. Config option to set any thousandSeparator:

thousandSeparator:'.'

.

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:


NumericField.jpg


The first fielset shows a list of fields configured for int values with the different options

The second fieldset shows a list of fields configured for float values with a decimal precision of 4 and you can notice there are only 3 decimals visibles because only 3 were entered for the values.

The third fielset shows a list of fields configured for float values with a decimal precision of 4 and you can notice there are 4 decimals but last one is zero (0) they have the same values as the second fieldset and also thousand separator is "blank space"

Here is the source code: (Actual version) NumericField.zip

Hope it helps.

[Animal]

This stuff is in Ext 4.0.

Ext.util.Format has number and currency formatting options.

[brittongr]

This stuff is in Ext 4.0.

Ext.util.Format has number and currency formatting options.

I haven't tried yet Ext 4.0, but what a wanted to do it was a class that encapsulate all these features that are very basic, just a few overrides but without to much code because i don't want to lose or get a conflict with the base class in this case (Ext.form.NumberField) so the overrides only remove/add the custom format to the value and then call the superclass functions to let it handle whatever is implemented.

As far as i saw there is no property currencySymbol or a property to set the format as a config option or the thousandSeparator config option in the class of the documentation of Ext 4.0 but maybe i didn't see well...

I know with Ext.util.Format you can get that and in fact that is what i'm using inside the class to format the values but the reason that i did the class was because i don't want to add that functionallity manually for every number field that i have in the form.

But if you can give a hint to archive this without an extra class or extra work, i will be thankfull.

[Animal]

It is there and documented in 4.0

[brittongr]

Thank you animal!, i was looking in Ext.for.Number class that's why i didn't found it...

[IvanJ]

I just tried using this in a grideditor and none of the features work

BTW Animal, saying "this is all in ExtJS 4" doesn't really help anyone dealing with this in ExtJS 3

[bregard]

This stuff is in Ext 4.0.

Ext.util.Format has number and currency formatting options.

I have used Ext.util.Format in charts and grids, but don't see an easy built in way to handle formatting with fields. Could you provide an example? Thanks...

[lhidalgo]

This stuff is in Ext 4.0.

Ext.util.Format has number and currency formatting options.

Hi, i'm sorry Animal but i don't see any way to add a formatter to the numberfield.
Can you show me the property to use for this please ?

If there's no way to do it simply maybe it exist an extension for Ext 4?

[bregard]

Hi, i'm sorry Animal but i don't see any way to add a formatter to the numberfield.
Can you show me the property to use for this please ?

If there's no way to do it simply maybe it exist an extension for Ext 4?

BUMP

[lhidalgo]

BUMP

Sorry i'm not very good in english, what means "BUMP" ?

Nobody have an answer about formating fields ?