How to format a numeric field using dutch format in extjs?

Question

I want to format the number entered by the user in Dutch format. i.e. use decimal separator like , and thousandth seperator like .

blur: function () { Ext.util.Format.number(this.value, '000,000.00') } 

I want to format my number field when blurring, the code above works fine, but my requirement is to get this format: "000000.000,00". How to do it in extjs?

Answer 1

Quick and dirty, just install thousandSeparator and decimalSeparator . It should work:

 //Set these once, right after Ext.onReady Ext.util.Format.thousandSeparator = '.'; Ext.util.Format.decimalSeparator = ','; //Then this should work: Ext.util.Format.number(12345.67, '0,000.00'); //output 12.345,67 

Or even better, use localization , so the formats can be changed in accordance with the requirements of the language.

Side note:

The documentation says:

To enable the specification of the format string using the UK (US) characters and the () and decimal (.) Characters for international numbers, add / i to the end. For example: 0.000,00 / i

And from the comments to the source code

 // The "/i" suffix allows caller to use a locale-specific formatting string. // Clean the format string by removing all but numerals and the decimal separator. // Then split the format string into pre and post decimal segments according to *what* the // decimal separator is. If they are specifying "/i", they are using the local convention in the format string. 

It seems to me that this means that the developer can use a specific format string “0.000.00” to format a given number, and not so that the developer can use this particular format string to format the number in the format they want. They will still need to change the default delimiter setting.

Edit

Demo link: http://jsfiddle.net/chaoszcat/nbWwN/

Answer 2

It now works for me for user-entered values ​​in the number field.

As noted by Lionel, this is necessary:

 // set this once after Ext.onReady Ext.util.Format.thousandSeparator = '.'; Ext.util.Format.decimalSeparator = ','; 

Then change your handler to this:

 blur: function(field) { field.setRawValue(Ext.util.Format.number(field.getValue(), '0.000,00/i')); } 

You should also include this configuration in your number field:

 decimalSeperator: ',' 

This will allow users to enter their own decimal characters.

Working example

Here is a working script for this using a number field.

Warning word

Ext.form.field.Number does not support formatting, the blur handler that I gave above will work fully if the user edits this field, and then does not return to it to edit it again if he redirects the field that will check and try to fix thousands of markers in decimal numbers.

If you use this field to send data back to the server, it will send it back in the format that is displayed (with thousands of delimiters), I do not know if this was what you were doing.

If you just need formatted numbers, you should do what you are trying to do above, but using textfield . That way, it won’t reconfigure your thousands as decimal places.

If you need all the functionality of a number field (spinners, min / max validation, step increments, etc.), you need to take a look at the extension of the numberfield class numberfield here is a user extension that already exists, and this is almost what you need, but it includes a currency symbol, it would be quite easy to do so.