How to format numeric field using dutch format in extjs?

Question

i want to format number entered by user in dutch format. ie. use decimal Separator as , and thousand seperator as .

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

I want to format my numeric field on blur, the above code works fine, but my requirement is to get a format like this- '000000.000,00'. How to do this in extjs?

Solution 1

Quick and dirty, just set the 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 the localization, so formats can be changed according to language requirement.

Side note:

The documentation wrote:

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

And from the comments in 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.

To me, it seems that it means a developer can use a specific format string "0.000,00" to format a given number, and not to mean a developer can use this specific format string to format a number into the format they want. They will still need to change the default separator setting.

Edit

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

Solution 2

I have this working for user entered values in a numberfield now.

As lionel pointed out, this is needed:

// 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 config on your numberfield:

decimalSeperator: ','

It will allow users to type in their own decimal symbols.

Working Example

Here is a working fiddle of this, using a numberfield.

A word of warning

Ext.form.field.Number does not support formatting, the blur handler I gave above will work totally fine if the user edits the field and then does not go back into it to edit it again, if he refocuses the field it will validate and try to correct the thousands markers into decimals.

If you are using this field to post data back to the server it will send it back in the format that is displayed (with thousand seperators), I don't know if that was what you were going for.

If you simply want formatted numbers you should do what you're trying to do above but with a textfield. That way it won't reconfigure your thousands as decimals.

If you want all the functionality of a numberfield (spinners, min/max validation, step increments, etc) you will have to take a look at extending the numberfield class, here is a user extension that already exists and which is almost exactly what you needed, but it includes a currency symbol, it would fairly easy to take that out.

Comments

[Jom]

tried this, but not working! Anything additional is needed for setting locale.

[Jom]

setting thousandSeparator and decimalSeparator already tried, but no result. will try the localization!

[Lionel Chan]

I just re-read your question. Did you mean you want to have just single "dot" for grouping? "12345475.394,49"?

[Jom]

i want thousandseperator as '.' and decimal seperator as ','. ie 123.456.787,56

[Lionel Chan]

Then check the demo link. It is there

[Jom]

will check my specific code, actually i am trying to convert user entered value in a numericfield to this format on blur event.

[egerardus]

@jomet I have it working for a numberfield now, please see updated example