Number Field with currency symbol, thousand separator & international support ExtJS4

[brittongr]

I wrote a previous version of this extension for extjs 3, basically is the same code, just adapted to work with current version 4.

The extension extends from Ext.form.field.Number and add these properties:

currencySymbol: null,
useThousandSeparator: true,
thousandSeparator: ',',
alwaysDisplayDecimals: false,
fieldStyle: 'text-align: right;',

Features:
1. Display a given currency symbol, default value is null.
2. Display a thousand separator, this can be any character including blank space (' ') default value is ",".
3. Force decimal precision to display all decimals from "decimalPrecision" property.

Notes:

If you set thousandSeparator config option to "." automatically decimalSeparator will be set to "," unless you also set decimalSeparator explicitly.
I didn't remove the trigger so you can still click up and down to increase or decrease the value. It will be nice to know the opinions of this one.

I tried to use Ext.util.Format but it doesn't allow to apply all the options the extension provide, so i still use my own function to format the value. One property that is missing from the extension is "currencyAtEnd" requested before, i couldn't add it today.
Full size image of combinations can be found inside the zip file.

For those just use USD currency formatting can take a look to this extension.

Previous version for extjs3 could be found here.

[lhidalgo]

Thank you very much for this extension. I'll try this very soon

[brittongr]

Thank you very much for this extension. I'll try this very soon

Great! Let me know if you found any issue.

[maneljn]

i have a problem with this extension.
When i submit the numeric value the post is with format, currency char, etc... i need to submit just numbers and decimal symbol. ?¿

this value 1,500.20 €
i want to submit this: 1500.20

[brittongr]

Thanks,

Let me see if i can fix that adding processRawValue function.

[brittongr]

sorry, no luck...

The issue is the same as this http://www.sencha.com/forum/showthre...l=1#post582429 and one workaround you can try is assign the values to a local variable before submit and then read the value from the field using field.getValue().

var params = formPanel.getForm().getFieldValues(false);
params.Amount = field.getValue();

But you need to use an empty form...

[Leila]

Thanks for the extension! I found it to be extremely helpful to me. I am in the process of developing a payroll processing utility and this extension is exactly what I needed to perform these types of functions. You did a great job coding this, it performs flawlessly!

[brittongr]

Thanks for the extension! Very helpful.

Glad to know that.

[Jeff.Evans]

OK, I think I figured out a way to get this to submit the "raw" (i.e. unformatted, numeric-only) value. And I think you were on the right track with processRawValue, brittongr. At least it appears to be working for me. Changes to the source (just the one function override) from the zip file are shown below in bold:

    onFocus: function(){
        this.setRawValue(this.removeFormat(this.getRawValue()));
        
        this.callParent(arguments);
    },
    processRawValue: function(value) {
        return this.removeFormat(value);
    }

I haven't tested extensively (i.e. if there are implications to overriding this beyond simply what we're trying to achieve). But at least for me, this makes the NumericField fully usable for our ExtJS 4.x application. Thanks for taking the initiative on creating something that should have really been given out-of-the-box.

[brittongr]

Thanks for the extension! I found it to be extremely helpful to me. I am in the process of developing a payroll processing utility and this extension is exactly what I needed to perform these types of functions. You did a great job coding this, it performs flawlessly!

Thanks, very nice...