Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: How to show "+" symbol in NumberField?

  1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    56

    Default How to show "+" symbol in NumberField?

    Hi, I need to be able to show positive numbers with a "+" symbol in a numberfield, any ideas how I would go about this?

    Cheers

  2. #2

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    56

    Default

    Yes thats right, say if it's a negative number, numberField supports [-2] but if it's positive number I need to explicitly show this by having the value in the field prefixed by the positive sign i.e. [+2].

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    481

    Default

    Not sure if it'll work, but you can try overwriting the default baseChars config to include plus sign. Try this - baseChars: '+0123456789'

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    56

    Default

    Tried adding "+" to baseChars, all that does is allow you to enter the symbol. As soon as the field no longer has focus it goes blank. Probably because the parse method in numberField thinks that, for example, "+2" is NaN and sets the field value to ''.

  6. #6
    Sencha User
    Join Date
    Jan 2008
    Location
    Toronto, Canada
    Posts
    481

    Default

    Then I guess you will have to write your own class. I'd extend Ext.form.NumberField. Should be pretty easy.

  7. #7
    Sencha User
    Join Date
    Jul 2009
    Posts
    56

    Default

    Hmm...easier said than done. I made an attempt at extending the class, but not sure about the inner workings and where I am going wrong. I add "+" to baseChars so it lets me enter the "+" symbol, but again the value is replace when the field loses focus. Tried to override the parseValue and fixPrecision functions but this has no effect. Any hints please??

    Code:
    /*!
     * Ext JS Library 3.0+
     * Copyright(c) 2006-2009 Ext JS, LLC
     * [email protected]
     * http://www.extjs.com/license
     */
    /**
     * @class Ext.form.NumberField
     * @extends Ext.form.TextField
     * Numeric text field that provides automatic keystroke filtering and numeric validation.
     * @constructor
     * Creates a new NumberField
     * @param {Object} config Configuration options
     * @xtype numberfield
     */
    Ext.form.PNumberField = Ext.extend(Ext.form.NumberField,  {
        
    /**
         * @cfg {RegExp} stripCharsRe @hide
         */
        
    /**
         * @cfg {RegExp} maskRe @hide
         */
        
     /**
         * @cfg {Boolean} allowPositive False to prevent entering a positive sign (defaults to true)
         */
        // private
        initEvents : function(){
            var allowed = this.baseChars + '';
            if (this.allowDecimals) {
                allowed += this.decimalSeparator;
            }
            if (this.allowNegative) {
                allowed += '-';
            }
            this.maskRe = new RegExp('[' + Ext.escapeRe(allowed) + ']');
            Ext.form.NumberField.superclass.initEvents.call(this);
        },
        // private
        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 = String(value).replace(this.decimalSeparator, ".");
            if(isNaN(value)){
                this.markInvalid(String.format(this.nanText, value));
                return false;
            }
            var num = this.parseValue(value);
            if(num < this.minValue){
                this.markInvalid(String.format(this.minText, this.minValue));
                return false;
            }
            if(num > this.maxValue){
                this.markInvalid(String.format(this.maxText, this.maxValue));
                return false;
            }
            return true;
        },
        getValue : function(){
            return this.fixPrecision(this.parseValue(Ext.form.NumberField.superclass.getValue.call(this)));
        },
        setValue : function(v){
            v = typeof v == 'number' ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
            v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
            return Ext.form.NumberField.superclass.setValue.call(this, v);
        },
        // private
        parseValue : function(value){
            value = parseFloat(String(value).replace(this.decimalSeparator, "."));
            value = isNaN(value) ? '' : value;
      if(value > 0)
      {
        return "+" + value;
      }
      else
      {
      return value;
      }
        },
        // private
        fixPrecision : function(value){
            var nan = isNaN(value);
            if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
               return nan ? '' : value;
            }
            var tmp =  parseFloat(parseFloat(value).toFixed(this.decimalPrecision));
      if(tmp > 0)
      {return "+"+tmp;}
        },
        beforeBlur : function(){
            var v = this.parseValue(this.getRawValue());
            if(!Ext.isEmpty(v)){
                this.setValue(this.fixPrecision(v));
            }
        }
    });
    Ext.reg('pnumberfield', Ext.form.PNumberField);

  8. #8
    Sencha User
    Join Date
    Nov 2008
    Location
    Berlin, Germany
    Posts
    24

    Default

    i think my solution is quite clumsy but it works for me

    PHP Code:
    {xtype:'numberfield',
     
    listeners:{
      
    blur:function(inp) {
       var 
    el=inp.getEl();
       if(
    inp.getValue()>0)
        
    el.dom.value='+'+inp.getValue();
      }
     }


  9. #9
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,232

    Default

    there's no need to create a new extension.
    just override stuff:
    Code:
    Ext.override(Ext.form.NumberField, {
        /**
         * @cfg showPlusSign {Boolean}
         * true to display plus symbol for positive values (defaults to false).
         */
        showPlusSymbol: false,
    
        initEvents : function() {
            var allowed = this.baseChars + '';
            if (this.showPlusSymbol) {
                allowed += '+';
            }
            if (this.allowDecimals) {
                allowed += this.decimalSeparator;
            }
            if (this.allowNegative) {
                allowed += '-';
            }
            this.maskRe = new RegExp('[' + Ext.escapeRe(allowed) + ']');
            Ext.form.NumberField.superclass.initEvents.call(this);
        },
    
        beforeBlur : function(){
            var v = this.parseValue(this.getRawValue());
    
            if(!Ext.isEmpty(v)){
                this.setValue(this.fixPrecision(v));
    
                if (this.showPlusSymbol && v > 0) {
                    this.setRawValue('+' + this.getRawValue());
                }
            }
        }
    });
    then create new NumberFields like so:
    Code:
    Ext.ComponentMgr.create({
        xtype: 'numberfield',
        showPlusSymbol: true,
        allowDecimals: true,
        decimalPrecision: 2,
        renderTo: document.body
    });
    to have them display '+' signs for positive numbers
    Last edited by mystix; 6 Aug 2009 at 6:23 AM. Reason: need to override the initEvents() method too

  10. #10
    Sencha User
    Join Date
    Jul 2009
    Posts
    56

    Default

    Hi, thanks for your suggestions guys.

    I found that adding "+" to the list of allowed chars threw an error when evaluated by Ext.escapeRe(allowed).

    In the end I just decided to use a textfield with a validator and change listener - not the most elegant solution but it does the job:

    Code:
    xtype: 'textfield',
                width:55,
                name: 'r_sphere',
                id:'r_sphere',
                value:'+0.00',
                msgTarget:'qtip',
                validator:function(value)
                {
                 if(isNaN(value))
                 {return 'Value must be a number';}
     
                  var pval = parseFloat(value);  
                  var a = pval * 100;
                  var b = 0.25 * 100;
     
                  if(a % b != 0 || pval < -50 || pval > 50)
                  {
                    return 'Value must be between -50 and +50 in 0.25 increments';
                  }
                  return true;
     
                },
                   listeners:{
                 change:function(f,strValue)
                 {
                  if(f.isValid())
                  {
                   var num = parseFloat(strValue)  
     
                    if(strValue >= 0 && strValue.charAt(0) != "+")
                    {
                           Ext.getCmp('r_sphere').setValue("+" + num.toFixed(2));   
                    }
                    else
                    {
                    if(strValue >= 0 && strValue.charAt(0) == "+")
                    {
                      Ext.getCmp('r_sphere').setValue("+" + num.toFixed(2));
                    }
                    else
                    {
                    Ext.getCmp('r_sphere').setValue(num.toFixed(2)); 
                    }
                    }
                  }
     
                 }
                }
               }

Page 1 of 2 12 LastLast

Posting Permissions

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