PDA

View Full Version : How to show "+" symbol in NumberField?



omermx
5 Aug 2009, 6:10 AM
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

5 Aug 2009, 6:13 AM
? as in always show [ +2 ] ?

omermx
5 Aug 2009, 6:33 AM
Yes thatís 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].

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

omermx
5 Aug 2009, 6:46 AM
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 ''. :((

elishnevsky
5 Aug 2009, 6:52 AM
Then I guess you will have to write your own class. I'd extend Ext.form.NumberField. Should be pretty easy.

omermx
5 Aug 2009, 7:49 AM
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??



/*!
* 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);

feyyaz
6 Aug 2009, 5:43 AM
i think my solution is quite clumsy but it works for me



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

mystix
6 Aug 2009, 6:03 AM
there's no need to create a new extension.
just override stuff:


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:


Ext.ComponentMgr.create({
xtype: 'numberfield',
showPlusSymbol: true,
allowDecimals: true,
decimalPrecision: 2,
renderTo: document.body
});

to have them display '+' signs for positive numbers

omermx
6 Aug 2009, 6:35 AM
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:



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

}
}
}

mystix
6 Aug 2009, 6:46 AM
I found that adding "+" to the list of allowed chars threw an error when evaluated by Ext.escapeRe(allowed).


there's a bug in Ext.escapeRe() imho. it doesn't escape the negative sign.
throw this into your bag of overrides:


Ext.escapeRe = function (c) {
return c.replace(/([-.*+?^${}()|[\]\/\\])/g, "\\$1");
}

mystix
6 Aug 2009, 6:59 AM
just filed a bug report for that btw:
http://extjs.com/forum/showthread.php?t=76811

omermx
6 Aug 2009, 7:22 AM
Ahh, Thanks.