Form field currency plugin

[realjax]

Hi,

I couldn't find something like this so wrote it myself.
This currency plugin plugs in to a xtype: 'textfield' like so:

{
    xtype: 'textfield',
    width: 100,
    fieldLabel: 'Currency demo',
    plugins: 'currency',
    name: 'demo',
    currencyConfig: {
        symbolBeforeAmount: true,
        currencySymbol: '\u20AC', //  = euro sign in unicode
        decimalSeparator: ',',
        thousandsSeparator: '.',
        negativeAmountClass: 'negativeAmount',
        invalidAmountText: 'Not a valid amount.'
    }
}

It kinda speaks for itself I guess.. Here's a screenprint of what the demo (included in zip) looks like if your run it.
currency600.jpg
The plugin creates a copy of the textfield with the same name (removes name property from original) so when you submit a currency field, the value is always sent as a float (submit decimal separator is a dot)

Two things to remember:
- the plugin only works on a Ext.form.TextField !
- use unique names for your textfields.

Update: Current version respects values set with the setValue() method. In other words, should work fine when (pre)loading a form with existing values from a backend for instance.

[Allbus]

Hi,

your plugin works very well!
By the way, why are you cleaning the thousand separators? Removing and re-adding commas make the text shift and may not be good for the user experience.

[Allbus]

I also think you should create a sequence on setValue() with updateShown(), or if I populate a form with setValues, the field is not formatted.

Then, you need to replace setValue() with setRawValue() in the plugin, and call updateHidden() after.

[Allbus]

And probably would be a good idea to overwrite getValue(), making it to read from hiddenValue

[realjax]

True I need to make a few adjustments for when populating a form. Will do that in a day or two :-)

[realjax]

And probably would be a good idea to overwrite getValue(), making it to read from hiddenValue

New version available. No need to overwrite getValue() since you are already getting the right value when you call this method.

[Allbus]

Executing your demo (reading from the second field):

Ext.getCmp('ext-comp-1451').getValue()
"12,000.00 $"

I expected to get "12000.00"

There are also problems if you use reversed separators and you call setValue().
For example (setting the first field),

Ext.getCmp('ext-comp-1448').setValue('100.00')

set "E 10.000,00" in the field.

I prefer to have field like jsakalos: you always set the value in a format and you always get it back in that format (see xdatefield, xtimefield, ...). I think it's much easier!

[realjax]

I'll fix things later for those of you who can't live without Ext.getCmp()
In the mean time, just get the fields from your form

...getForm().getValues()

or read in the field by NAME

...getForm().findField('demo2')

Should work fine

[Allbus]

Yes, I know that reading from form you get the unformatted value.

I used getCmp() because I also need to do some calculations in the form. I need to get the value for something else in the form.
I'm getting the field by name. But findField() has the same result of getCmp() - they both return the field - so field.getValue() will return the formatted value.

The point is that form.getValues() doesn't call getValue() on each field.

Probably is more wrong to override getValue(), probably would be better to have getUnformattedValue()

[Allbus]

And what do you think about having a single "server format" to populate the field?