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

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.

Juan Mendes Juan Mendes · Accepted Answer · 2014-09-05T17:47:44

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

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

2 Answers