Results 1 to 7 of 7

Thread: Numberfield, multiple decimal seperators

  1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    33

    Default Numberfield, multiple decimal seperators

    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:
    Code:
    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:
    Code:
    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?

  2. #2
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246

    Default

    for each User, modify decimalSeparator on fly
    Code:
    //by default is '.'
    if(myUser.isEuropean) {
      Ext.form.NumberField.prototype.decimalSeparator = ',';
    }

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    33

    Default

    Quote Originally Posted by laurentParis View Post
    for each User, modify decimalSeparator on fly
    Code:
    //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.

  4. #4
    Sencha User laurentParis's Avatar
    Join Date
    Aug 2010
    Location
    paris
    Posts
    246

    Default

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

    Code:
    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);
        }
    });

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    33

    Default

    Quote Originally Posted by laurentParis View Post
    so you need to extend numberfield and decide to accept input with multiple decimalseparator but display only number with dot for decimalSeparator !

    Code:
    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!

  6. #6

    Default

    One function seems to be missing when inside a grid:

    Quote Originally Posted by laurentParis View Post
    so you need to extend numberfield and decide to accept input with multiple decimalseparator but display only number with dot for decimalSeparator !

    Code:
    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);
        }
    });

  7. #7
    Sencha User
    Join Date
    Jan 2016
    Posts
    12

    Default

    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.

Similar Threads

  1. decimal separator in a numberfield
    By PatrickS in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 15 Oct 2010, 12:00 AM
  2. NumberField + decimal separator
    By fother in forum Ext GWT: Discussion
    Replies: 0
    Last Post: 26 Aug 2009, 5:55 AM
  3. NumberField with , for decimal separator
    By Pmithrandir in forum Ext GWT: Help & Discussion (1.x)
    Replies: 4
    Last Post: 18 Dec 2008, 7:35 AM
  4. allow pure decimal in NumberField
    By angelflaree in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 27 Jul 2008, 3:56 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •