Numberfield, multiple decimal seperators

[LeonM]

Hello,

I tried searching the forum, but I could not find what I was looking for.

I need a numberfield, in which users can enter a decimal value. However, we have both American and European users. Americans use a '.' as decimal separator, europeans (mostly) use a ','.

So, I need a numberField that accepts both, I tried this:

baseChars: '0123456789',
allowDecimals: true,
decimalSeparator: ',.',
decimalPrecision : 2,
allowNegative: false,

But that does not work, fields with comma seperated values return to null when unfocused.
If I use:

decimalSeparator: ',',

It works fine for european users, but no longer for american users.

The API states:

decimalSeparator : StringCharacter(s) to allow as the decimal separator (defaults to '.')

So, one would presume multiple characters can be used, just like 'baseChars' does.

How can I allow multiple characters as decimal seperator?

[laurentParis]

for each User, modify decimalSeparator on fly

//by default is '.'
if(myUser.isEuropean) {
  Ext.form.NumberField.prototype.decimalSeparator = ',';
}

[LeonM]

for each User, modify decimalSeparator on fly

//by default is '.'
if(myUser.isEuropean) {
  Ext.form.NumberField.prototype.decimalSeparator = ',';
}

Unfortunately that is not an acceptable solution, ALL users need to be able to use both.

[laurentParis]

so you need to extend numberfield and decide to accept input with multiple decimalseparator but display only number with dot for decimalSeparator !

var myNumberField = Ext.Extend(Ext.form.NumberField, {
    initEvents : function(){
        var allowed = this.baseChars + '';
        if (this.allowDecimals) {
            allowed += this.decimalSeparator;
            allowed += ",";                                            // << add comma
        }
        if (this.allowNegative) {
            allowed += '-';
        }
        this.maskRe = new RegExp('[' + Ext.escapeRe(allowed) + ']');
        Ext.form.NumberField.superclass.initEvents.call(this);
    },
    getErrors: function (value) {
        value = value || this.processValue(this.getRawValue());
        value = value.replace(',', '.');
    return myNumberField.superclass.getErrors.call(this, value);
    },
    setValue : function(v){
        v = Ext.isNumber(v) ? v : parseFloat(String(v).replace(',', "."));
        return myNumberField.superclass.setValue.call(this, v);
    },
    parseValue : function(value){
        value = parseFloat(String(value).replace(",", "."));
        return myNumberField.superclass.parseValue.call(this, value);
    }
});

[LeonM]

so you need to extend numberfield and decide to accept input with multiple decimalseparator but display only number with dot for decimalSeparator !

var myNumberField = Ext.Extend(Ext.form.NumberField, {
    initEvents : function(){
        var allowed = this.baseChars + '';
        if (this.allowDecimals) {
            allowed += this.decimalSeparator;
            allowed += ",";                                            // << add comma
        }
        if (this.allowNegative) {
            allowed += '-';
        }
        this.maskRe = new RegExp('[' + Ext.escapeRe(allowed) + ']');
        Ext.form.NumberField.superclass.initEvents.call(this);
    },
    getErrors: function (value) {
        value = value || this.processValue(this.getRawValue());
        value = value.replace(',', '.');
    return myNumberField.superclass.getErrors.call(this, value);
    },
    setValue : function(v){
        v = Ext.isNumber(v) ? v : parseFloat(String(v).replace(',', "."));
        return myNumberField.superclass.setValue.call(this, v);
    },
    parseValue : function(value){
        value = parseFloat(String(value).replace(",", "."));
        return myNumberField.superclass.parseValue.call(this, value);
    }
});

That works great! This also learned me how to make my own field types.

Thanks!

[clesquir]

One function seems to be missing when inside a grid:

so you need to extend numberfield and decide to accept input with multiple decimalseparator but display only number with dot for decimalSeparator !

var myNumberField = Ext.Extend(Ext.form.NumberField, {
    initEvents : function(){
        var allowed = this.baseChars + '';
        if (this.allowDecimals) {
            allowed += this.decimalSeparator;
            allowed += ",";                                            // << add comma
        }
        if (this.allowNegative) {
            allowed += '-';
        }
        this.maskRe = new RegExp('[' + Ext.escapeRe(allowed) + ']');
        Ext.form.NumberField.superclass.initEvents.call(this);
    },
    getErrors: function (value) {
        value = value || this.processValue(this.getRawValue());
        value = value.replace(',', '.');
    return myNumberField.superclass.getErrors.call(this, value);
    },
    setValue : function(v){
        v = Ext.isNumber(v) ? v : parseFloat(String(v).replace(',', "."));
        return myNumberField.superclass.setValue.call(this, v);
    },
    validateValue : function(value){
        if(!Ext.form.NumberField.superclass.validateValue.call(this, value)){
            return false;
        }
        if(value.length < 1){ // if it's blank and textfield didn't flag it then it's valid
             return true;
        }
        value = parseFloat(String(value).replace(",", "."));
        return myNumberField.superclass.validateValue.call(this, value);
    },
    parseValue : function(value){
        value = parseFloat(String(value).replace(",", "."));
        return myNumberField.superclass.parseValue.call(this, value);
    }
});

[rafmak1]

Hi,
I got this error:
Ext.Extend is not a function
I tried extend with lower case I have a blank page without error
I need an example to follow about extending a field .
Should I define a namespace ?
Regards.