PDA

View Full Version : Number Field with currency symbol, thousand separator & international support ExtJS4



brittongr
21 Sep 2011, 5:03 AM
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. (http://www.sencha.com/forum/showthread.php?139600-CurrencyField-extends-NumberField-to-format-display-as-currency)

Previous version for extjs3 could be found here. (http://www.sencha.com/forum/showthread.php?125935-Number-field-with-currency-symbol-thousand-separator-with-international-support)

lhidalgo
21 Sep 2011, 5:27 AM
=D>
Thank you very much for this extension. I'll try this very soon ;)

brittongr
21 Sep 2011, 5:47 AM
=D>
Thank you very much for this extension. I'll try this very soon ;)

Great! Let me know if you found any issue.

maneljn
11 Oct 2011, 6:23 AM
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
11 Oct 2011, 11:45 AM
Thanks,

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

brittongr
12 Oct 2011, 12:07 PM
sorry, no luck...

The issue is the same as this http://www.sencha.com/forum/showthread.php?125935-Number-field-with-currency-symbol-thousand-separator-with-international-support&p=582429&viewfull=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
17 Nov 2011, 12:52 PM
Thanks for the extension! I found it to be extremely helpful to me. I am in the process of developing a payroll processing (http://www.paycor.com/) 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
17 Nov 2011, 2:27 PM
Thanks for the extension! Very helpful.

Glad to know that.

Jeff.Evans
29 Dec 2011, 1:22 PM
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
29 Dec 2011, 4:23 PM
Thanks for the extension! I found it to be extremely helpful to me. I am in the process of developing a payroll processing (http://www.paycor.com/) 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...

brittongr
29 Dec 2011, 4:29 PM
Jeff,

I will help you testing it and see if it solves the scenario of @maneljn...

Thanks to you too...

pmiguelmartins
6 Jan 2012, 1:13 AM
I made a simple change to permit configure the side of the currency symbol ....

currencySymbolPos : 'right', // left , right

If you want I can post where

Pedro Martins

PS - By the way ... thanks for the great work

brittongr
6 Jan 2012, 5:34 AM
If you want I can post where



Sure...

pmiguelmartins
6 Jan 2012, 8:23 AM
Changes in bold


/*
* GNU General Public License Usage
* This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
*
* http://www.gnu.org/licenses/lgpl.html
*
* @description: This class provide aditional format to numbers by extending Ext.form.field.Number
*
* @author: Greivin Britton
* @email: brittongr@gmail.com
* @version: 2 compatible with ExtJS 4
*/
Ext.define('Ext.ux.form.NumericField', {
extend: 'Ext.form.field.Number',//Extending the NumberField
alias: 'widget.numericfield',//Defining the xtype,

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

initComponent: function(){
if (this.useThousandSeparator && this.decimalSeparator == ',' && this.thousandSeparator == ',')
this.thousandSeparator = '.';
else
if (this.allowDecimals && this.thousandSeparator == '.' && this.decimalSeparator == '.')
this.decimalSeparator = ',';

this.callParent(arguments);
},
setValue: function(value){
Ext.ux.form.NumericField.superclass.setValue.call(this, value != null ? value.toString().replace('.', this.decimalSeparator) : value);

this.setRawValue(this.getFormattedValue(this.getValue()));
},
getFormattedValue: function(value){
if (Ext.isEmpty(value) || !this.hasFormat())
return value;
else
{
var neg = null;

value = (neg = value < 0) ? value * -1 : value;
value = this.allowDecimals && this.alwaysDisplayDecimals ? value.toFixed(this.decimalPrecision) : value;

if (this.useThousandSeparator)
{
if (this.useThousandSeparator && Ext.isEmpty(this.thousandSeparator))
throw ('NumberFormatException: invalid thousandSeparator, property must has a valid character.');

if (this.thousandSeparator == this.decimalSeparator)
throw ('NumberFormatException: invalid thousandSeparator, thousand separator must be different from decimalSeparator.');

value = value.toString();

var ps = value.split('.');
ps[1] = ps[1] ? ps[1] : null;

var whole = ps[0];

var r = /(\d+)(\d{3})/;

var ts = this.thousandSeparator;

while (r.test(whole))
whole = whole.replace(r, '$1' + ts + '$2');

value = whole + (ps[1] ? this.decimalSeparator + ps[1] : '');
}

if (this.currencySymbolPos == 'right') {
return Ext.String.format('{0}{1}{2}', (neg ? '-' : ''), value, (Ext.isEmpty(this.currencySymbol) ? '' : ' ' + this.currencySymbol));
} else {
return Ext.String.format('{0}{1}{2}', (neg ? '-' : ''), (Ext.isEmpty(this.currencySymbol) ? '' : this.currencySymbol + ' '), value);
}
}
},
/**
* overrides parseValue to remove the format applied by this class
*/
parseValue: function(value){
//Replace the currency symbol and thousand separator
return Ext.ux.form.NumericField.superclass.parseValue.call(this, this.removeFormat(value));
},
/**
* Remove only the format added by this class to let the superclass validate with it's rules.
* @param {Object} value
*/
removeFormat: function(value){
if (Ext.isEmpty(value) || !this.hasFormat())
return value;
else
{
if (this.currencySymbolPos == 'right') {
value = value.toString().replace(' ' + this.currencySymbol, '');
} else {
value = value.toString().replace(this.currencySymbol + ' ', '');
}

value = this.useThousandSeparator ? value.replace(new RegExp('[' + this.thousandSeparator + ']', 'g'), '') : value;

return value;
}
},
/**
* Remove the format before validating the the value.
* @param {Number} value
*/
getErrors: function(value){
return Ext.ux.form.NumericField.superclass.getErrors.call(this, this.removeFormat(value));
},
hasFormat: function(){
return this.decimalSeparator != '.' || (this.useThousandSeparator == true && this.getRawValue() != null) || !Ext.isEmpty(this.currencySymbol) || this.alwaysDisplayDecimals;
},
/**
* Display the numeric value with the fixed decimal precision and without the format using the setRawValue, don't need to do a setValue because we don't want a double
* formatting and process of the value because beforeBlur perform a getRawValue and then a setValue.
*/
onFocus: function(){
this.setRawValue(this.removeFormat(this.getRawValue()));

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

voodoov
3 Apr 2012, 1:44 AM
Hi brittongr,
Thank you for your plugin.

How can I change this class to comma separate numbers when user is typing them?
For example on KeyUp or Change Event the comma appears.

Thank you in Advance

Hermes.Gonzalez
1 Aug 2012, 5:26 PM
Very nice. Great job man! Help me a lot this extension.

Do you speak spanish or portuguese?
I was born in Panama but I live in Brazil.

If you want to make contact, msn: gonzaleznet@hotmail.com.

murrah
15 Sep 2012, 9:56 PM
Cool! Thank you for this extention!

rhytha
17 Sep 2012, 2:52 AM
Any solution for this??

How can I change this class to comma separate numbers when user is typing them?
For example on KeyUp or Change Event the comma appears.

Regards,
Riyaz

LeonM
15 Oct 2012, 3:15 PM
Very nice plugin! Just what I was looking for :)


For those from Europe, you might want to use this:



Ext.define('Ext.ux.form.EuroField', {
extend: 'Ext.ux.form.NumericField',
alias: 'widget.eurofield',
currencySymbol: '€',
useThousandSeparator: true,
thousandSeparator: '.',
alwaysDisplayDecimals: true,
fieldStyle: 'text-align: left;'
});

mysticav
21 Jan 2013, 10:54 PM
Very disappointed to find that it does not support format for decimals.

I'm looking for an spreadsheet field behavior, where I can define a format decimal precision and the real decimal precision.

Example:
For the real value I would enter: 33.33333333
The displayed value would be: $ 33.33

but then, the raw value will still be: 33.3333333

This class doesn't keep the real value.

So I hope the creator improves it, or somebody collaborate with that functionality.

Thanks.

howgoo
20 Feb 2013, 7:12 PM
Very disappointed to find that it does not support format for decimals.

I'm looking for an spreadsheet field behavior, where I can define a format decimal precision and the real decimal precision.

Example:
For the real value I would enter: 33.33333333
The displayed value would be: $ 33.33

but then, the raw value will still be: 33.3333333

This class doesn't keep the real value.

So I hope the creator improves it, or somebody collaborate with that functionality.

Thanks.

41972

When I enter the value 33.33333333,The results were not what you(@mysticav (http://www.sencha.com/forum/member.php?1609-mysticav)) said that.
I user #14 @pmiguelmartins (http://www.sencha.com/forum/member.php?235574-pmiguelmartins) 's code.

bhaidaya
23 Aug 2013, 8:24 AM
You might want to switch


value = value.toString().replace(this.currencySymbol + ' ', '');

to


value = value.toString().replace(this.currencySymbol , '').trim();

as to allow parsing the field value a bit better in the case the value is submitted as $2,000.00 (no space)

edit: thanks!

bhaidaya
20 Sep 2013, 10:25 AM
Is anyone else having the problem where you type 123 rapidly in the field and it ends up looking like this 1.0023.

It seems that the field will autopad the decimals on first keydown but then leave the cursor at the end of the field resulting in the first button press + decimals + remaining button presses..

bhaidaya
20 Sep 2013, 12:30 PM
Nevermind this seems to be a bug with 4.1

tony.maroun
23 May 2014, 6:53 AM
It Works beautifully. Thanks :D

phaiemko123
8 Jul 2014, 12:50 AM
it does not work, anybody can help me. Thanks

mkkguru
16 Jul 2014, 5:07 AM
Can you please let me know how to validate below type of validations in functions. var reqDependency20_1=((Ext.getCmp('i_7_2158_id') != undefined)?((((Ext.getCmp('i_7_559_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_1846_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_577_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_2158_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_2295_id').getInputValueCT()+'') == '')) ? true : (((Ext.getCmp('i_7_565_id').getInputValueCT()+'') != '') ? true :(((Ext.getCmp('i_80_1068_id').getInputValueCT()+'') == 'Audited')?true:(((Ext.getCmp('i_7_559_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_565_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_1846_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_2158_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_2295_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_577_id').getInputValueCT()+'') == ''))))):((((Ext.getCmp('i_7_559_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_1846_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_577_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_2295_id').getInputValueCT()+'') == '')) ? true : (((Ext.getCmp('i_7_565_id').getInputValueCT()+'') != '')? true :(((Ext.getCmp('i_80_1068_id').getInputValueCT()+'') == 'Audited')?true:(((Ext.getCmp('i_7_559_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_565_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_1846_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_2295_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_577_id').getInputValueCT()+'') == '')))))); Thanks in advance