Hybrid View

  1. #1
    Sencha User
    Join Date
    Nov 2008
    Location
    france
    Posts
    58
    Vote Rating
    0
    pkli is on a distinguished road

      0  

    Default 4.0.2 Ext.form.field.Number : force decimal precision in string value.

    4.0.2 Ext.form.field.Number : force decimal precision in string value.


    Hi,

    Here is two (very) simple modifications for "numberfield" prototype.
    For beginners ...

    A new param "forceDecimals", to force formatting of the string value with as many decimals than "decimalPrecision".

    Eg :
    decimalPrecision : 2
    forceDecimals : true
    value : 125.2

    => display/submit value : 125.20

    I'm not a javascript expert ...
    Comments, criticals or suggestions are welcome ...


    bonus track ... As french user, I use "," (comma) as decimalSeparator. A simple way to use "." (dot) as secondary allowed decimalSeparator is to allow it in baseChars ...
    So you can use any of them (useful to allow copy/paste from others software using dot as decimal separator)...


    Code:
    if (Ext.form.field.Number){
            Ext.apply(Ext.form.field.Number.prototype, {
    			
    			// force decimals string value
    			forceDecimals : true,
    			valueToRaw: function(value) {
    				var me = this,decimalSeparator = me.decimalSeparator,precision = me.decimalPrecision,forceDecimals = me.forceDecimals;
    				value = me.parseValue(value);
    				value = me.fixPrecision(value);
    				value = Ext.isNumber(value) ? value : parseFloat(String(value).replace(decimalSeparator, '.'));
    				
    				if (isNaN(value)) return '';
    				else {
    					value = String(value).replace('.', decimalSeparator);
    					if (value.indexOf(decimalSeparator)>=0 && forceDecimals) {
    						var dec = value.substr(value.indexOf(decimalSeparator)+1);
    						for(var i=dec.length;i<precision;i++) {
    							value = value+"0";
    						}
    					}
    					return value;
    				}
    			},
    
    			// allow dot as decimalSeparator even if this is not the locale setting
    			baseChars : '0123456789.',
            });
        }

  2. #2
    Sencha User
    Join Date
    Sep 2010
    Posts
    72
    Vote Rating
    0
    JanVenekamp is on a distinguished road

      0  

    Default


    You might want to take a look at regular expressions.

    Out of my head (so not checked):
    PHP Code:
    {
        
    xtype'text',
        
    // forcDecimals: true, numDecimals 2
        
    regex: /^[0-9]+(.|,)[0-9]{2}$/,
        
    regex: new RegExp(
    '/^[0-9]+((.|,)[0-9]{'+numDecimals+'})'+ (!forceDecimals '?':'') +'$/',


  3. #3
    Sencha User
    Join Date
    Nov 2008
    Location
    france
    Posts
    58
    Vote Rating
    0
    pkli is on a distinguished road

      0  

    Default


    @JanVenekamp : "You might want to take a look at regular expressions."

    Thanks for your suggestion.
    You're right ... but there is a problem ... I HATE regular expressions !

    First, I think that RegEx is very powerfull in complex cases but absolutely not intuitive (even good programmers have to double check their expressions ) and sometinmes useless for simple checks.

    But also, few years ago, I had to code a PHP function to check if a string was present in long html source codes.
    I used RegEx and the result was very time consuming...
    So, I used a simple string search and the execution time was reduced by 5 ...

    But as you're right on the principle, I do not want to keep this bad experience as reference. So, I just write a single JS test to compare again the two methods in a loop.
    Checking with RegEx VS string function.


    1 - Using string function to test AND set correct value :

    Code:
    var start = new Date;
    for (var t = 0;t<1000000;t++) {
    	
    	var value = "10.";
    	if (value.indexOf(".")>=0) {
    		var dec = value.substr(value.indexOf(".")+1);
    		for(var i=dec.length;i<2;i++) {
    			value = value+"0";
    		}
    	}
    	
    }
    var end = new Date;
    console.log(end.getTime()-start.getTime());
    Result : 473 milliseconds


    2 - Using RegEx, just to check value :

    Code:
    var start = new Date;
    for (var t = 0;t<1000000;t++) {
    	var value = "10.";
    	var reg = new RegExp('/^[0-9]+.[0-9]{2}$/');
    	var test = reg.test(value);
    }
    var end = new Date;
    console.log(end.getTime()-start.getTime());
    Result : 9085 milliseconds !!!!

    WOW !!!
    Definitely, I do not like RegEx ...

    Of course, this test is based on a "1000000" loop ... in "real life", difference is insignificant
    but RegEx is really a time consuming method ...

  4. #4
    Ext JS Premium Member
    Join Date
    Jan 2008
    Posts
    88
    Vote Rating
    0
    Allan is on a distinguished road

      0  

    Default


    What if you took the new RegExp(...) out of the loop?

  5. #5
    Sencha User
    Join Date
    Nov 2008
    Location
    france
    Posts
    58
    Vote Rating
    0
    pkli is on a distinguished road

      0  

    Default


    @Allan

    With "new RegExp" out of the loop, RegExp wins ...

    Code:
    var value = "10.2";
    var reg = new RegExp('/^[0-9]+.[0-9]{2}$/');
    
    var start = new Date;
    for (var t = 0;t<1000000;t++) {
    	if (value.indexOf(".")>=0 && value.substr(value.indexOf(".")+1).length < 2 ) {
    		// set value
    	}
    }
    var end = new Date;
    console.log(end.getTime()-start.getTime());
    
    
    start = new Date;
    for (var t = 0;t<1000000;t++) {
    	if (!reg.test(value)) {
    		// set value
    	}
    }
    end = new Date;
    console.log(end.getTime()-start.getTime());
    String test : 185
    RegExp test : 102

    So, you're right, using one RegExp to test many string is a quicker method.

    But in this example, I think that use a RegExp to check a field value means declare it each time.
    So, unless I'm wrong, we have to let it in the test loop ?

    Of course, "I hate RegExp" was a joke (even if I really hate it ) because it's a powerful and useful function.
    What I mean is that using RegExp seems more effective, but ... not always ...

  6. #6
    Sencha User
    Join Date
    Sep 2010
    Posts
    72
    Vote Rating
    0
    JanVenekamp is on a distinguished road

      0  

    Default


    @pkli Learning regular expressions can be a , but once you master the basics it's very handy. The one line regex is far more easier to write and interpret for someone who knows regex than 10+ lines of code.