PDA

View Full Version : Form field currency plugin



realjax
2 Aug 2010, 12:55 AM
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.
21758
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.


(http://www.sencha.com/deploy/dev/docs/source/TextField.html#cls-Ext.form.TextField)

Allbus
3 Aug 2010, 8:08 AM
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
3 Aug 2010, 8:26 AM
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
3 Aug 2010, 8:44 AM
And probably would be a good idea to overwrite getValue(), making it to read from hiddenValue

realjax
3 Aug 2010, 11:47 PM
True I need to make a few adjustments for when populating a form. Will do that in a day or two :-)

realjax
9 Aug 2010, 5:13 AM
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
9 Aug 2010, 6:22 AM
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
9 Aug 2010, 11:48 PM
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
9 Aug 2010, 11:55 PM
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
10 Aug 2010, 12:55 AM
And what do you think about having a single "server format" to populate the field?

realjax
11 Aug 2010, 12:49 AM
But findField() has the same result of getCmp()

That's because you gave the field an ID. I haven't buil;t in support for ID's. Remove it , use findField with name = 'demo2' and problem fixed.:)


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

use form.getFieldValues() then..

MarkusL
16 Aug 2010, 5:30 AM
Hi!

There are two problems with v02 of the plugin:


values larger than 999999 don't work. When editing or during getValues() only ONE thousands separator is removed. Result: 1.000.500,50 € => 1000.500.50 which is obviously not a valid floating point value.
setValues() does not work using JSON floating point values. If 1000.5 is stored in the database the plugin formats the value to 10005,00 - ignoring the "."

firdefex
7 Oct 2010, 4:18 AM
Hi!

There are two problems with v02 of the plugin:



values larger than 999999 don't work. When editing or during getValues() only ONE thousands separator is removed. Result: 1.000.500,50 € => 1000.500.50 which is obviously not a valid floating point value.



see formatHiddenValue, just replace

rawAmount = String(rawAmount).replace(this.currencyConfig.thousandsSeparator,'');

with this one

var replacer = RegExp(this.currencyConfig.thousandsSeparator,'g');
rawAmount = String(rawAmount).replace(replacer,'');

'g' is for global search and replace

use the same way for cleanForEdit as well

MarkusL
8 Oct 2010, 12:00 AM
Thanks for your help, but you have to escape the thousandsSeparator to get a valid regexp:


var replacer = new RegExp('\\'+this.currencyConfig.thousandsSeparator,'g');

jumping jack
28 Jan 2011, 1:06 AM
Hi, I've tried your methods, but 'replacers' didn't help neither of firdefex nor MarkusL. In Edit mode number stays with one comma (thousandsSeparator).
What I find even worse - that I cannot get this value without format-signs - for example, I want to get it's value and make some arithmetic and write result down in other field: neither getForm.findfield("demo") nor getCmp("id_demo") nor smth. else helps. :s
Only if I send whole form, I can see in getForm().getValues(true) it's right Number value - without currency format.
Maybe somebody knows, whether it's possible to get some kind key/values or some kind of getField from getForm().getValues(true) or you know other solution ? Thank you !

ericsmith66
24 Mar 2011, 1:05 PM
FYI:

It appear that submitted value of currency field is 'undefined' if no value is entered (field is blank).
We changed line 79 of currency plugin to:

return '';from:

return;

That fixed the problem.

fourbrain
20 Apr 2011, 6:31 AM
This is an absolutely amazing plugin. Works perfect. Thanks so much, saved me a lot of time and made our excel users so happy =P~

fourbrain
20 Apr 2011, 9:29 AM
What I find even worse - that I cannot get this value without format-signs - for example, I want to get it's value and make some arithmetic and write result down in other field: neither getForm.findfield("demo") nor getCmp("id_demo") nor smth. else helps. :s
Only if I send whole form, I can see in getForm().getValues(true) it's right Number value - without currency format.
Maybe somebody knows, whether it's possible to get some kind key/values or some kind of getField from getForm().getValues(true) or you know other solution ? Thank you !



alert( Ext.getCmp('demofield').hiddenField.dom.value ) ;
...works fine for me. I get the raw value, no matter if i use name and / or id for the field.

RayD
10 Apr 2012, 1:19 PM
Great plugin. Can you create a Sencha Touch 2 version as well?

nbourdeau
15 May 2013, 8:33 AM
What about an Ext 4.x version ??

Filipizaum
28 Aug 2014, 6:36 AM
Hello.
I'm using Ext JS 4.2 and that version have no compositefield.

Cannot create an instance of unrecognized alias: widget.compositefield

How does I can use your plugin without needing to install newest versions of Ext JS.