[SOLVED] HELP show numberfield with european decimal point and thousandseparator!!

[ThierryC]

Hi,

i'm having real trouble (trying and searching for multiple hours) in making a numberfield acting the way i want it to.
it's for a numberfield on a panel

remember : in europe the decimal separator is a ',' and the thousand separator is a '.'

basically i want 2 things,

When form is initially filled with data coming from Ajax/iSeries, to have those displayed with the right decimal & thousand separator
so a value of in iseries 1234,56 should be displayed as 1.234,56
and secondly when entering a value in a numberfield with f.e with decimalPrecision:2 (lets say 1234.5, when leaving the field, it should show 1.234,50)

the first i achived this by modifying the setValue method:
(by the way : this has been set initially:
xt.util.Format.thousandSeparator = '.';
Ext.util.Format.decimalSeparator = ',';

setValue: function(v){
        var me=this;
        edtcde = "0"+ Ext.util.Format.thousandSeparator+"0";
        if (me.allowDecimals && me.decimalPrecision>0) {
            edtcde+=Ext.util.Format.decimalSeparator;
            for (i=1;i<=me.decimalPrecision; i++){
                edtcde+='0';
            }
        };
        vv=Ext.util.Format.number(v, edtcde+'/i');
        return Ext.form.NumberField.superclass.setRawValue.call(this, vv);
    }, 

but now when changing the content of the same numfield, i have the problem that the entered value (which is reformatted by the previous setValue method) is no longer considered to be valid number.. (an error is triggered and says that '123,00 is not a valid number"

examples:

• [1]i have a numberfield without decimals (id: QQQJAAR) on a form with value 57000
  
  it is shown on the display as 57.000 (<== is ok)
  
  when looking in the componentquery i get the following
  x=Ext.ComponentQuery.query('#QQQJAAR')[0]
  x.value: null ???
  x.getValue: "57" ????? <=====
  x.getRawValue: "57.000"
  
  
  [2]numberfield with 2 decimals (id QQCOSTE and i overwrite blank value with 1234,56
  
  it is shown on the display as 1.234,56 (<== is ok)
  
  when looking in the componentquery i get the following
  x=Ext.ComponentQuery.query('#QQQCOSTE')[0]
  x.value: "1234.56"
  x.getValue: "1.23" ????? <=====
  x.getRawValue: "1.234,56"
  added to those weird results, the border is shown in red together with the message 1.234,56 is not a valid number !!
  

i'm totally stuck, can someone please lead me to the solution,


thx

thierry

[eweiler]

Are you using the decimalSeparator config for your numberfield? You might not need to modify setValue.

Can you share the config options you've set for your numberfield?

[ThierryC]

Hi Eric

no big things are defined:
i've extended the existing numberfield to numberfieldQ .. just to override the setValue and blur event
(you'll see a lot of commented lines.i've used for doing some test)

{
                            xtype: 'fieldcontainer',
                            layout: 'table',
                            columns: 3,
                            items: [{
                                xtype: 'numberfieldQ',
                                fieldLabel: 'External cost',
                                id: 'QQCOSTE',
                                flex: 1, 
                                labelWidth: 100,
                                width: 200 //,
//                                listeners:{
//                                    change: function() {cmqu11r.Mold.Utilities.calcMoldCost();}
//                                }
                            }, {..... continued 

i also add the definition for the numberfieldq

Ext.define('Ext.form.numberfieldQ', {
    extend: 'Ext.form.field.Number',
    alias: 'widget.numberfieldQ',
    fieldStyle: 'text-align: right;',
    hideTrigger: true,
    selectOnFocus: true,
    labelAlign: 'right',

    initComponent: function() {
        this.callParent();
        this.on('blur', this.blurEvent, this);
        this.on('focus', this.focusEvent, this);
        Ext.util.Format.decimalSeparator = ',';
    },

    setValue: function(v){
        var me=this;
        edtcde = "0"+ Ext.util.Format.thousandSeparator+"0";
        if (me.allowDecimals && me.decimalPrecision>0) {
            edtcde+=Ext.util.Format.decimalSeparator;
            for (i=1;i<=me.decimalPrecision; i++){
                edtcde+='0';
            }
        };
        vv=Ext.util.Format.number(v, edtcde+'/i');
        if (me.id== 'QQQJAAR') {
        console.log(parseFloat(v));};

//        v = typeof v === 'number' ? v : String(v).replace(this.decimalSeparator, ",");
//        v = isNaN(v) ? '' : String(v).replace(",", this.decimalSeparator);
//        v = isNaN(v) ? '' : this.fixPrecision(String(v).replace(",", this.decimalSeparator));
       
        return Ext.form.NumberField.superclass.setRawValue.call(this, vv);
    },
    
    fixPrecision : function(value){
        var nan = isNaN(value);
        if(!this.allowDecimals || this.decimalPrecision === -1 || nan || !value) {
           return nan ? '' : value;
        }
        return parseFloat(value).toFixed(this.decimalPrecision);
    },
            
    blurEvent: function(d) {
//        var me=this;
//        if (me.id==='QQCOSTE'){
//            console.log("BLUR");
//            console.log(me);
//        }
//        var edtcde = '0'+Ext.util.Format.thousandSeparator+'0';
//        if (d.decimalPrecision !==0){
//            edtcde+=Ext.util.Format.decimalSeparator;
//            for (i=1;i<=d.decimalPrecision; i++){
//               edtcde+='0';
//            }
//        };
//        d.setRawValue(Ext.util.Format.number(d.value, edtcde+'/i'));
        if (this.oValue !== d.value) {
            checkChanged(d, "S"); // nummeriek
        };
    },
    
    focusEvent: function(d) {
        this.oValue = d.value;
    }
}); 

[eweiler]

I notice you are setting the decimalSeparator of the formatting object:

Ext.util.Format.decimalSeparator = ',';


But I think you are overlooking setting the config on the actual number field, which should make it unnecessary to do all the extra overrides you are using.

Forgive me if I overlooked something, but you should have this configured in your base number q field:

http://docs.sencha.com/extjs/4.2.2/#...cimalSeparator

[ThierryC]

Thx Eric,

it was left there after doing some debugging for this issue,

the formatsettings were already set at the start of my app (settings.js) and should'nt be set anymore on the field definition, you're right.

i've now removed this setting, but it's still has the same result.


the formatting of the displayed field looks ok, it is the value that is somehow still taking the value considering the thousand separator as the decimal point.

what i also don't understand is what the difference is between.
field.value
field.getValue
field.getRawValue

[richard.milone]

You should set the decimalSeparator as eweiler suggested. You should probably remove most of those overrides you have. Just a simple update on blur would probably do the trick. See this Fiddle as an example. It's in Ext JS 4.1.0 but the concept is the same for 3.4.0: http://jsfiddle.net/ferXz/.

[ThierryC]

Thx Richard,

That function on the blur was already ok, but this one is only activated when changing the content of the field.

what i'd want is to have the same formatted value shown during initial build of the form (after ajax call to iseries with field.setValue())

it should work as the render function on a grid, but i don't see the a render possibility on the numberfield.

in trying to solve this, (elas without any luck) i tried to build the similar logic of the 'blur' into the 'setValue'.. but it's not giving me the result i want.


thierry

[eweiler]

Add this config on your numberfield:

items: [{
                                xtype: 'numberfieldQ',
                                fieldLabel: 'External cost',
                                id: 'QQCOSTE',
                                flex: 1, 
                           decimalSeparator: ',',
                                labelWidth: 100,
                                width: 200 //,
//                                listeners:{
//                                    change: function() {cmqu11r.Mold.Utilities.calcMoldCost();}
//                                }
                            }

[ThierryC]

Hi Eric,

i did what you suggested,

the blur function is working ok, but is showing the correct format only after changing the field,

how can i set the correct format on my initial buildForm?

thierry

Ext.define('Ext.form.numberfieldQ', {
    extend: 'Ext.form.field.Number',
    alias: 'widget.numberfieldQ',
    fieldStyle: 'text-align: right;',
    hideTrigger: true,
    selectOnFocus: true,
    labelAlign: 'right',
[B]   decimalSeparator:',',[/B]
    initComponent: function() {
        this.callParent();
        this.on('blur', this.blurEvent, this);
        this.on('focus', this.focusEvent, this);
    },

    blurEvent: function(d) {
        var me=this;
        var edtcde = '0'+Ext.util.Format.thousandSeparator+'0';
        if (d.decimalPrecision !==0){
            edtcde+=Ext.util.Format.decimalSeparator;
            for (i=1;i<=d.decimalPrecision; i++){
               edtcde+='0';
            }
        };
        d.setRawValue(Ext.util.Format.number(d.getValue(), edtcde+'/i'));
        if (this.oValue !== d.value) {
            checkChanged(d, "S"); // nummeriek
        };
    },
    
    focusEvent: function(d) {
        this.oValue = d.value;
    }
}); 

i've also added this to the field definition (although i think it's not really needed there, since it's in my numberfieldQ definition by default?

{
                            xtype: 'fieldcontainer',
                            layout: 'table',
                            columns: 3,
                            items: [{
                                xtype: 'numberfieldQ',
                                fieldLabel: 'External cost',
                             [B]   decimalSeparator:',',[/B]
                                id: 'QQCOSTE',
                                flex: 1, 
                                labelWidth: 100,
                                width: 200,
                                listeners:{
                                    change: function() {cmqu11r.Mold.Utilities.calcMoldCost();}
                                }
                            }, {........... 

[eweiler]

How are you trying to set it? If you pass it to the browser with '.' for the decimal separator and set that value, it should display it properly. Javascript will still use the '.' for the decimal separator, but the form field should display with comma.

[ThierryC]

Hi Eric,

thx for the response

alhtough i'm not quite sure what the thousandseparator will do..

i have to leave now for Home, i'll inform you tomorrow

thx anyhow for the support

[ThierryC]

Hi All,

Still not solved

this is what i done to test.. maybe i'm overlooking something... i somebody sees the light, i'll be happy

this is my fielddefinition

{xtype: 'numberfieldQ',
 fieldLabel: 'External cost',
 decimalSeparator:',',
 id: 'QQCOSTE',
 flex: 1, 
 labelWidth: 100,
 listeners:{change: function() {cmqu11r.Mold.Utilities.calcMoldCost();}
} 

and here my extension of the numberfield

Ext.define('Ext.form.numberfieldQ', {
    extend: 'Ext.form.field.Number',
    alias: 'widget.numberfieldQ',
    fieldStyle: 'text-align: right;',
    hideTrigger: true,
    selectOnFocus: true,
    labelAlign: 'right',
    decimalSeparator:',',

    initComponent: function() {
        this.callParent();
        this.on('blur', this.blurEvent, this);
        this.on('focus', this.focusEvent, this);
    },

    blurEvent: function(d) {
        var me=this;
        var edtcde = '0'+Ext.util.Format.thousandSeparator+'0';
        if (d.decimalPrecision !==0){
            edtcde+=Ext.util.Format.decimalSeparator;
            for (i=1;i<=d.decimalPrecision; i++){
               edtcde+='0';
            }
        };
        d.setRawValue(Ext.util.Format.number(d.getValue(), edtcde+'/i'));
        if (this.oValue !== d.value) {
            checkChanged(d, "S"); // numeric
        };
    },
    
    focusEvent: function(d) {
        this.oValue = d.value;
    }
}); 

When i do the following:

x=Ext.ComponentQuery.query('#QQCOSTE')[0]
x.setValue(123456.78)           ===> on the display i see 123456,78   (decimal sep is ok, but i dont have my thousand separator
x.value          ==>   123456.78
x.getValue()     ==>   123456.78
x.getRawValue()  ==>   123456,78

the values of the field are ok, but still i don't have my thousand separator

after the blur has been activated (see function in numberfieldQ that basically sets the rawvalue), the result is displayed the way i want it. BUT...

after blur == on the form it is displayed :  123.456,78 which is what i really want
x.value          ==>   123456.78    = OK
x.getValue()     ==>   123.45   == NOK ???
x.getRawValue()  ==>   123.456,78 ==OK ??

i hope this situation helps you better understand my problem,
so basically : i want the field to be displayed as "123.456,78" during initial setValue
and also i still have the problem when i set the rawvalue in my blur function, it's also effecting the getValue()..


any help would be greatly appreciated

thierry

[eweiler]

I wouldn't expect to see the thousands Separator in the number field. It looks like the blur event you have is corrupting the values associated with the field.

A user on the sencha forums has created an extension to try to tackle this issue: http://www.sencha.com/forum/showthre...support-ExtJS4


http://docs.sencha.com/extjs/4.1.1/#...m.field.Number

On the numberfield API page, I created an example using this code, notice the console.logs for testing:

Ext.create('Ext.form.Panel', {
    title: 'On The Wall',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'numberfield',
        anchor: '100%',
        decimalSeparator: ',',
        name: 'bottles',
        decimalPrecision : 4,
        fieldLabel: 'Bottles of Beer',
        value: 399.2343,
        maxValue: 999999,
        minValue: 0
    }],
    buttons: [{
        text: 'Take one down, pass it around',
        handler: function() {
            this.up('form').down('[name=bottles]').spinDown();
           console.log(this.up('form').down('[name=bottles]').getRawValue());
           console.log(this.up('form').down('[name=bottles]').getValue());
        }
    }]
});

[ThierryC]

Hi Eric,

indeed that extension is doing the right job..

you're my hero


thx a lot


thierry