Overriding Ext.util.Format.thousandSeparator except when formatting money - extjs

Question

I am trying to override Ext.util.Format.decimalSeparator and thousandSeparator. So, in my app, when I chnage the language to Spanish and I try using this function, Ext.util.Format.number(1234,'$0,000'), still it converts the number to 1.234 instead of 1,234.
I want that, irrespective of what language I choose, it should always format the money to $0,000 format and not using my selected locale, e.g., never $0.000. I observed if I change the thousandSeparator of Ext.util.Format object, it works fine. So, I added the following code in Ext.Loader.loadScript callback function in launch function in Application.js,
var utilFormatObj={};
utilFormatObj.thousandSeparator = ",";
utilFormatObj.decimalSeparator = ".";
Ext.override(Ext.util.Format, utilFormatObj);
BUt, it seems to work only in this place, once it loads the app on webpage, it again gets back to thousandSeparator=".". I can see that ext-lang-es.js file has the function which sets these properties. Can anyone suggest how can I catch whether the app is completely loaded on webapge and then use the above code there. Thank you.

Answer 1

When you call Ext.util.Format.number() you're not specifying what to use as decimal or thousand separator, you're only specifying precision, whether to show thousands separator, and whether to pad precision with zeroes.
The documentation for Ext.util.Format.number states:
The format string must specify separator characters according to US/UK conventions ("," as the thousand separator, and "." as the decimal separator)
Therefore if you want to display numbers in different locales, you have to run the code that changes the default separators before calling Ext.util.Format.number or Ext.util.Format.currency.
var value = 202020.20, format = "0,000.0000";
// Print in Spanish
Ext.util.Format.thousandSeparator = ".";
Ext.util.Format.decimalSeparator = ",";
alert(Ext.util.Format.number(value, format));
// Print in Swedish French
Ext.util.Format.thousandSeparator = "'";
Ext.util.Format.decimalSeparator = ",";
alert(Ext.util.Format.number(value, format));
// Print in English
Ext.util.Format.thousandSeparator = ",";
Ext.util.Format.decimalSeparator = ".";
alert(Ext.util.Format.number(value, format));
Here's a hack you can use if you really want to specify that currency should always use a period as the thousand separator but still have Ext.util.Format.number use the selected locale's separators.
function formatMoney(amount, sign, decimals, end) {
// Save the thousand separator
var thousandSep = Ext.util.Format.thousandSeparator;
Ext.util.Format.thousandSeparator = '.';
var formatted = Ext.util.Format.currency(amount, sign, decimals, end);
// restore the thousand separator
Ext.util.Format.thousandSeparator = thousandSep;
return formatted;
}
Example for the above code snippets: https://fiddle.sencha.com/#fiddle/9vm

Answer 2

I am guessing that you are not using the loader after you build your application for deployment. Typically the dynamic loader is only used for development (so you can see each script individually) and you use a faster method in prod.
You could load your Ext overrides on the callback for Ext.define:
Ext.define( className, data, [createdFn] )
where createdFn is a function that contains your Ext overrides. This approach may lend itself to race conditions if you invoke that Format object before the override is applied. To be confident, you could add another JS file with your overrides (after Ext is loaded, before your app code) and make sure that is included when you load your app.