PDA

View Full Version : Numberfield, multiple decimal seperators



LeonM
27 Oct 2010, 12:54 AM
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 (http://dev.sencha.com/deploy/dev/docs/source/NumberField.html#cfg-Ext.form.NumberField-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
27 Oct 2010, 1:07 AM
for each User, modify decimalSeparator on fly


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

LeonM
27 Oct 2010, 1:11 AM
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
27 Oct 2010, 1:34 AM
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
27 Oct 2010, 3:56 AM
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
4 Aug 2011, 10:29 AM
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
27 Sep 2016, 10:08 AM
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.