PDA

View Full Version : Another Money Field



damon1977
17 Aug 2010, 1:42 PM
I know there are several out there, but here's my take on the Money Field.

I thought about building in support for the property 'hiddenName' to submit the unformatted value the way combobox submits it's value, but opted to just parse the value server side for now. You could also setRawValue(getValue()) just before the form is submitted.

Also getErrors() needs work... I just reverted it back to the text field's getErrors() method so the field at least supports allowBlank property.



Ext.ns('Ext.ux');

Ext.ux.MoneyField = Ext.extend(Ext.form.NumberField, {
fieldClass: 'x-form-field x-form-money-field',
currencyChar: '$',
numberDelim: ',',
delimLength: 3,
alwaysShowCents: true,

initEvents: function() {
Ext.ux.MoneyField.superclass.initEvents.call(this);
var allowed = this.baseChars + '';
var stripBeforeParse = [];

if (this.allowDecimals) {
allowed += this.decimalSeparator;
}
if (this.allowNegative) {
allowed += '-';
} if (this.currencyChar) {
allowed += this.currencyChar;
stripBeforeParse.push(Ext.escapeRe(this.currencyChar));
} if (this.numberDelim) {
allowed += this.numberDelim;
stripBeforeParse.push(Ext.escapeRe(this.numberDelim));
}
this.maskRe = new RegExp('[' + Ext.escapeRe(allowed) + ']');
this.stripBeforeParseRe = new RegExp('[' + stripBeforeParse.join('|') + ']','g');
},

getErrors: function() {
var errors = Ext.form.NumberField.superclass.getErrors.apply(this, arguments);
return errors;
},

setValue: function(v) {
v = this.formatValue(this.parseValue(v));
if (!Ext.isEmpty(v)) this.setRawValue(v);
},

beforeBlur: function() {
var v = this.parseValue(this.getRawValue());
if (!Ext.isEmpty(v)) {
this.setRawValue(this.formatValue(v));
}
},

parseValue: function(value) {
value = String(value).replace(this.stripBeforeParseRe, '');
value = Ext.ux.MoneyField.superclass.parseValue.call(this, value);
return value;
},

formatValue: function(value) {
value = String(Ext.ux.MoneyField.superclass.fixPrecision.call(this, value));
var vSplit = value.split('.');

var cents = (vSplit[1]) ? '.' + vSplit[1] : '';
if (this.alwaysShowCents && cents == '') cents = '.00';

if (this.numberDelim && this.delimLength) {
var numbers = vSplit[0].split('');
var sNumbers = [];
var c=0;
while (numbers.length > 0) {
c++;
if (c > this.delimLength) c = 1;
sNumbers.unshift(numbers.pop());
if (c == this.delimLength && numbers.length > 0) sNumbers.unshift(this.numberDelim);
}
value = sNumbers.join('') + cents;
} else {
value = vSplit[0] + cents;
}
if (this.currencyChar) value = this.currencyChar + String(value);
return value;
}
});

Ext.reg('moneyfield', Ext.ux.MoneyField);

davion
30 Aug 2010, 5:37 AM
Hi, was test it with ExtJS 3.2.1 and all works just fine for me with one small notice, if I have number like 15.50
it will display it like 15.5 :(
to fix it I put after line
if (this.alwaysShowCents && cents == '') cents = '.00';
next lines:
if (this.alwaysShowCents && cents == '.1') cents = '.10';
if (this.alwaysShowCents && cents == '.2') cents = '.20';
if (this.alwaysShowCents && cents == '.3') cents = '.30';
if (this.alwaysShowCents && cents == '.4') cents = '.40';
if (this.alwaysShowCents && cents == '.5') cents = '.50';
if (this.alwaysShowCents && cents == '.6') cents = '.60';
if (this.alwaysShowCents && cents == '.7') cents = '.70';
if (this.alwaysShowCents && cents == '.8') cents = '.80';
if (this.alwaysShowCents && cents == '.9') cents = '.90';

and all works just fine :)
thanks

Jaitsu
31 Aug 2010, 7:52 AM
why not just cast the cents to a number and use the .toFixed() method on it to set the number of decimals?