View Full Version : CurrencyField extends NumberField to format display as currency

6 Jul 2011, 11:23 AM
I created this as of a requirement for a project I'm working on, so I thought I'd share it here.
It is somewhat based off of this extension (http://www.sencha.com/forum/showthread.php?125935-Number-field-with-currency-symbol-thousand-separator-with-international-support).

Ext.define('Teller.ext.CurrencyField', { extend: 'Ext.form.field.Number', alias: 'widget.currencyfield', hideTrigger: true, setValue: function (v) { this.callParent(arguments); if (!Ext.isEmpty(this.getValue())) { this.setRawValue(Ext.util.Format.currency(this.getValue())); } }, removeFormat: function (v) { if (Ext.isEmpty(v)) { return ''; } else { v = v.toString().replace(Ext.util.Format.currencySign, '').replace(Ext.util.Format.thousandSeparator, ''); if (v % 1 === 0) { // Return value formatted with no precision since there are no digits after the decimal return Ext.util.Format.number(v, '0'); } else { // Return value formatted with precision of two digits since there are digits after the decimal return Ext.util.Format.number(v, '0.00'); } } }, // Override parseValue to remove the currency format parseValue: function (v) { return this.callParent([this.removeFormat(v)]); }, // Remove the format before validating the value getErrors: function (v) { return this.callParent([this.removeFormat(v)]); }, /* Override getSubmitData to remove the currency format on the value that will be passed out from the getValues method of the form */ getSubmitData: function () { var returnObject = {}; returnObject[this.name] = this.removeFormat(this.callParent(arguments)[this.name]); return returnObject; }, // Override preFocus to remove the format during edit preFocus: function () { this.setRawValue(this.removeFormat(this.getRawValue())); this.callParent(arguments); } });

To use it, specify 'currencyfield' as the xtype of a form field.


Update: Fixed hard-coded Amount column to be generic based on the name; fixed situations where the value is less than zero or greater than 999

6 Sep 2011, 12:26 PM
The Forum is messing up the formatting of the code, so here is the file:

6 Sep 2011, 1:23 PM
The Forum is messing up the formatting of the code

Try using CODE tags instead of PHP CODE and see if that helps. I remember that it works better in some cases.


6 Sep 2011, 1:25 PM
Thanks for the tip - I tried the CODE tag but it doesn't work any better.

21 Sep 2011, 5:16 AM
Thanks for the mention andygl, i also referred yours in this thread about my extension that works with extjs4.


13 Apr 2012, 11:45 AM
The removeFormat method in the code above won't handle amounts with multiple separators. You need to replace the separator globally using a regex expression with the replace method. Otherwise the method returns an empty string.

var thou = new RegExp(Ext.util.Format.thousandSeparator,'gi');
v = v.toString().replace(Ext.util.Format.currencySign, '').replace(thou, '');