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

[brittongr]

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

Hi, thanks for let me know your issue, the features are really working... i just tried but there is something that i didn't explain at the beginning of this thread... i didn't want to override the getValue function to return the value with the format because that wont be good when you want use it in calculations or send it to the server as number. If i did it so then every time when you need the value you will need to parse the formatted value calling another function.

When you click to edit, the NumericField automatically get the focus and parse the value to a valid number and then when you leave the editor the getValue function in its parent class (NumberField) is called and that class doesn't have the current format and only returns the value with the format implemented in it. Thats the reason why you are not seing the expected format in the cell.

In order to display the value with the format inside a grid just use a renderer:

var field = new Ext.ux.NumericField({
        currencySymbol: 'EUR',
        decimalPrecision:5,
        allowDecimals:true,
        alwaysDisplayDecimals: true
    });
    
    // create the Grid
    var grid = new Ext.grid.EditorGridPanel(
    {
        store: store,
        columns: [
        {
            header: 'Price',
            width: 160,
            sortable: true,
            dataIndex: 'price',
            editor: field,
            renderer: function(v){
                
                return field.getFormattedValue(v);
            }
        },

hope the explanation helps you...

[berlamont]

thank you for this, exactly what I need at the moment!

[kryo]

Hi, you might want to check out:

http://www.sencha.com/forum/showthre....locale.Format

I am doing number/currency formatting based on standard locale definitions. It might be an idea to merge these two extensions together into a new locale based text component.

[brittongr]

Hi, you might want to check out:

http://www.sencha.com/forum/showthre....locale.Format

I am doing number/currency formatting based on standard locale definitions. It might be an idea to merge these two extensions together into a new locale based text component.

yes, i'm going to check it out this weekend