PDA

View Full Version : Ext.form.NumberField -> forceDecimalPrecision



tobiu
2 Jan 2010, 4:07 PM
hi together,

since i have not found something like this, i created a small override. if you leave the config forceDecimalPrecision to false, the behaviour is 1:1 to the "normal" version. if you set it to true, you can guarantee to show your defined decimals. only set the the config to true if you use decimalPrecision!

my usecase is a currency-field where i would like to always show 2 decimals, like 20.00. in an editorGrid it even becomes more important. you can use a gridrenderer adding the currency like ''+20.00+'€'. if you edit the value without this extension, you would get 20 in the field and if you change it the value of the grid would be 20€. even worse is the RowEditor: you open a line containing 20.00, the field gets 20 and the invalid-marker pops up, because the values do not match.

kind regards,
tobiu



/*
* 3.3.0
* force decimalPrecision
*/
Ext.form.NumberField.override ({
forceDecimalPrecision : false

,fixPrecision : function(value){
var nan = isNaN(value);
if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
return nan ? '' : value;
}
value = parseFloat(value).toFixed(this.decimalPrecision);
if(this.forceDecimalPrecision)return value
return parseFloat(value);
}
,setValue : function(v){
if (!Ext.isEmpty(v)){
v = Ext.isNumber(v) ? v : parseFloat(String(v).replace(this.decimalSeparator, "."));
if(this.forceDecimalPrecision){
v = v.toFixed(this.decimalPrecision);
}
v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
}
return Ext.form.NumberField.superclass.setValue.call(this, v);
}
});




/*
* 3.0.3, 3.1.0, 3.2.1
* force decimalPrecision
*/
Ext.form.NumberField.override ({
/*
* @cfg {Boolean} true forces the field to show following zeroes. e.g.: 20.00
*/
forceDecimalPrecision : false

,fixPrecision : function(value){
var nan = isNaN(value);
if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
return nan ? '' : value;
}
value = parseFloat(value).toFixed(this.decimalPrecision);
if(this.forceDecimalPrecision)return value
return parseFloat(value);
}
,setValue : function(v){
if(!Ext.isEmpty(v)){
if(typeof v != 'number'){
if(this.forceDecimalPrecision){
v = parseFloat(String(v).replace(this.decimalSeparator, ".")).toFixed(this.decimalPrecision);
} else {
v = parseFloat(String(v).replace(this.decimalSeparator, "."));
}
}
v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
}
return Ext.form.NumberField.superclass.setValue.call(this, v);
}
});

jccardenas
23 Jun 2010, 1:27 AM
Thanks a lot, it really worked!
Had the same trouble and was looking for a solution...

Why is the standard Numberfield not working like that by default? I mean, if I ask for a decimal precision of 2, its clear that I want it even if the decimals are .00...

Thanks again!

tobiu
23 Jun 2010, 2:05 AM
hi jccardenas,

welcome to the community! i am glad, someone finally has found this topic.
i definitely agree, that this should be the default expected behaviour of decimalPrecision.

@team: feel free to include this if you agree ;)

the fix should work in 3.2.1 too.

kind regards,
tobiu

jccardenas
23 Jun 2010, 2:07 AM
Yeah I can confirm it's working on 3.2.1
BR

devnullable
14 Oct 2010, 12:15 AM
Hi,

does this NumberField override still work on 3.3.0? I am trying to use it but without success...

tobiu
14 Oct 2010, 2:00 AM
hi devnullable,

there seem to be some changes in 3.3.0.
i updated the top posting and added a new version of this ux that should work with 3.3.0.

i don't have the time for testing right now though :)


kind regards
tobiu

devnullable
14 Oct 2010, 4:24 AM
Hi tobiu,

I tried the new version. It is now showing decimals right. However, I found out that NumberFields' getValue() returns a string instead of a Number(Ext.isNumber() returns false). Is this how it should work?

tobiu
14 Oct 2010, 4:54 AM
i guess it is:



v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);


is also in the original Ext JS - method. we could add a check, if this.decimalSeparator === '.' and in that case not adding String(v).

tobiu
14 Oct 2010, 4:56 AM
take a look at:
http://dev.sencha.com/deploy/dev/docs/source/NumberField.html#cls-Ext.form.NumberField

getValue()
parseValue()

too :)


kind regards
tobiu

MartinL
24 Nov 2010, 1:04 AM
Hello Tobias (I write in English for the other community members), did you already have to solve the thousand (http://dict.leo.org/ende?lp=ende&p=Ci4HO3kMAA&search=thousand&trestr=0x8001) point problem as we have it in germany with ext js? For example 10.000,00 in Ext it is 10,000.00 and if you have 10.000 ext makes 10 out of it.

best regards

Martin

tobiu
24 Nov 2010, 2:23 AM
hi martin,

this ux can only prevent the numberfield from cutting off zeroes at the end. for the "thousand point problem" we use a self written currency field, which basically works like a numberfield (e.g. for editorGrids), using . or , depending on the used language and afterwards formatting the result into the expected way.


kind regards
tobias

brittongr
6 Mar 2011, 6:51 AM
Hello Tobias (I write in English for the other community members), did you already have to solve the thousand (http://dict.leo.org/ende?lp=ende&p=Ci4HO3kMAA&search=thousand&trestr=0x8001) point problem as we have it in germany with ext js? For example 10.000,00 in Ext it is 10,000.00 and if you have 10.000 ext makes 10 out of it.

best regards

Martin

I just added my own extension maybe it can help you, it handles the decimalSeparator just in the way that you said...

Take a look to:
http://www.sencha.com/forum/showthread.php?125937-Number-field-with-currency-symbol-thousand-separator-with-international-support&p=577701