PDA

View Full Version : Currency, Ext.form.NumberField and similar...



seek
21 Jan 2010, 12:55 AM
Hi all,
I'm trying to mix some code to obtain an Ext.form.NumberField able to show numbers in currency-like format.
But, due to my (in)experience I can't find a really good path to obtain that I want...
All code, already seen in others threads, are THAT code!!
http://www.extjs.com/forum/showthread.php?t=48600 - Condor
http://www.extjs.com/forum/showthread.php?t=35741 - NOSLOW


Ext.namespace('Ext.ux');

Ext.apply(Ext.util.Format, {
// locale currency format, _MUST_ be defined in src\locale\ext-lang-****.js files
numberFormat: {
decimalSeparator: ',',
decimalPrecision: 2,
groupingSeparator: '.',
groupingSize: 3,
currencySymbol:'\u20AC' //Euro symbol
},
formatNumber: function(value, numberFormat){
var format = Ext.apply(Ext.apply({}, Ext.util.Format.numberFormat), numberFormat);
if (typeof value !== 'number') {
value = String(value);
if (format.currencySymbol) {
value = value.replace(format.currencySymbol, '');
}
if (format.groupingSeparator) {
value = value.replace(new RegExp(format.groupingSeparator, 'g'), '');
}
if (format.decimalSeparator !== '.') {
value = value.replace(format.decimalSeparator, '.');
}
value = parseFloat(value);
}
var neg = value < 0;
value = Math.abs(value).toFixed(format.decimalPrecision);
var i = value.indexOf('.');
if (i >= 0) {
if (format.decimalSeparator !== '.') {
value = value.slice(0, i) + format.decimalSeparator + value.slice(i + 1);
}
}
else {
i = value.length;
}
if (format.groupingSeparator) {
while (i > format.groupingSize) {
i -= format.groupingSize;
value = value.slice(0, i) + format.groupingSeparator + value.slice(i);
}
}
if (format.currencySymbol) {
value = format.currencySymbol + value;
}
if (neg) {
value = '-' + value;
}
return value;
}
});

Ext.override(Ext.Component, {
findParentBy: function(fn){
for (var p = this.ownerCt; (p != null) && !fn(p); p = p.ownerCt) ;
return p;
},
findParentByType: function(xtype){
return typeof xtype == 'function' ? this.findParentBy(function(p){
return p.constructor === xtype;
}) : this.findParentBy(function(p){
return p.constructor.xtype === xtype;
});
}
});

Ext.util.Format.currencyNull = function(val){
//it's not better to define render with standard "numberRenderer" ??
//var nr = Ext.util.Format.numberRenderer('0,000.00');
if (val == null || val == '') {
return '';
}
else
if (val > 999999999999) {
return '';
}
else {
//return nr(val); // instead of "Ext.util.Format.formatNumber"
return Ext.util.Format.formatNumber(val);
}
}

Ext.ux.currencyField = function(config){
var defaultConfig = {
allowDecimals: true,
allowNegative: false,
decimalPrecision: 2,
maxValue: 1000000000,
minValue: 0,
value: null,
selectOnFocus: true,
itemCls: 'rmoney'
};
Ext.ux.currencyField.superclass.constructor.call(this, Ext.apply(defaultConfig, config));
this.on('change', this._onChange, this);
this.on('initself', this._onInitSelf);
this.on('focus', this._onFocus);
this.on('blur', this._onBlur);
this.on('render', this._onRender);
this.currencyNumericValue = config.value || null;
}

Ext.extend(Ext.ux.currencyField, Ext.form.NumberField, {
currencyNumericValue: null,
initSelf: function(){
if (this.value === null || this.value === '') {
this.currencyNumericValue = null;
}
else {
this.currencyNumericValue = this.value;
}
this.setRawValue(this.formatter(this.currencyNumericValue));
this.originalValue = this.currencyNumericValue;
},
getValue: function(){
if (this.value === '' || this.value === null) {
return null;
}
else
if (isNaN(this.value)) {
this.value = 0;
}
else {
return Number(this.value);
}
},
_onChange: function(field, newVal, oldVal){
if (newVal === '') {
this.currencyNumericValue = null
}
else {
this.currencyNumericValue = newVal - 0;
}
},
_onRender: function(cmp){
this.setRawValue(this.formatter(this.currencyNumericValue));
if (this.isFormField) {
var parentForm = this.findParentByType('form');
parentForm.on('actioncomplete', function(){
cmp.initSelf();
});
parentForm.on('actionfailed', function(){
cmp.initSelf();
});
parentForm.on('afterLayout', function(){
cmp.initSelf();
});
}
},
formatter: function(value){
if (value === 0) {
return Ext.util.Format.currencyNull("0");
}
else {
return Ext.util.Format.currencyNull(value);
}
},
_onBlur: function(field){
if (field.getRawValue() == '') {
this.currencyNumericValue = null;
}
else {
this.currencyNumericValue = field.getRawValue() - 0;
}
field.setRawValue(this.formatter(this.currencyNumericValue));
if (this.currencyNumericValue !== this.value) {
this.value = this.currencyNumericValue;
}
},
_onFocus: function(field){
if (this.currencyNumericValue === null || this.currencyNumericValue === '') {
field.setRawValue('');
}
else {
field.setRawValue((this.currencyNumericValue - 0).toFixed(this.decimalPrecision));
}
},
initAllSiblings: function(){
if (this.isFormField) {
var parentForm = this.findParentByType('form');
var currencyFields = parentForm.findByType('currencyfield');
Ext.each(currencyFields, function(currencyfield){
currencyfield.initSelf();
});
}
}
});

Ext.ComponentMgr.registerType('currencyfield', Ext.ux.currencyField);
HTML test page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../../ext-3.1.0/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext-3.1.0/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="../../ext-3.1.0//ext-all-debug.js"></script>
<script type="text/javascript" src="currencyField.js"></script>
<style>
.rmoney .x-form-field {text-align: right;}
.lmoney .x-form-field {text-align: left;}
</style>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
bd.createChild({
tag: 'h2',
html: 'Dollar Field Demo'
});
bd.createChild({
tag: 'p',
html: 'Notice that unformatted dollar value gets submitted on save.'
});
var simple = new Ext.FormPanel({
id: 'dollar-form',
labelWidth: 75, // label settings here cascade unless overridden
url: 'dollarFieldDemo.html',
method: 'POST',
frame: true,
title: 'Simple Form',
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaults: {
width: 230
},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
}, {
id: 'dollar',
xtype: 'currencyfield',
fieldLabel: 'Currency val',
name: 'dollar',
value: 12345.67,
cls: 'currency-field',
decimalPrecision: 5
}, {
id: 'dollar2',
xtype: 'currencyfield',
fieldLabel: 'Currency val2',
name: 'dollar2',
value: 1234567890.12345,
//decimalSeparator: ',',
cls: 'currency-field',
decimalPrecision: 5
}],
buttons: [{
text: 'Save',
handler: function(){
Ext.getCmp('dollar-form').getForm().submit({
waitMsg: 'Saving...',
method: 'POST'
});
}
}, {
text: 'Cancel'
}, {
text: 'Test',
handler: function(){
alert(Ext.getCmp('dollar').getValue() + ' ' + Ext.getCmp('dollar2').getValue());
}
}]
});
simple.render(document.body);
});
</script>
</head>
<body>
</body>
</html>
Originally, the code from NOSLOW work better, but when I add simbol, and invert group separator and decimal separator.....

Thanks all
Seek

seek
21 Jan 2010, 6:29 AM
Now, thanks to this post http://www.extjs.com/forum/showthread.php?t=5499, I've evolved my code as here:


if (Ext.util.Format) {
if (!Ext.util.Format.CurrencyFactory) {
Ext.util.Format.CurrencyFactory = function(dp, dSeparator, tSeparator, symbol){
return function(n){
dp = Math.abs(dp) + 1 ? dp : 2;
dSeparator = dSeparator || ".";
tSeparator = tSeparator || ",";
var m = /(\d+)(?:(\.\d+)|)/.exec(n + ""), x = m[1].length > 3 ? m[1].length % 3 : 0;
return (n < 0 ? '-' : '') +
(x ? m[1].substr(0, x) + tSeparator : "") +
m[1].substr(x).replace(/(\d{3})(?=\d)/g, "$1" + tSeparator) +
(dp ? dSeparator + (+m[2] || 0).toFixed(dp).substr(2) : "") +
" " +
symbol;
};
}
}
};
var euroFormatter = Ext.util.Format.CurrencyFactory(2, ",", ".", "\u20AC");
var dollarFormatter = Ext.util.Format.CurrencyFactory(2, ",", ".", "$");

Ext.namespace('Ext.ux');

Ext.override(Ext.Component, {
// override by Animal (http://extjs.com/forum/showthread.php?t=26484) that
// allows us to find the dollar fields parent form. Very nice.
findParentBy: function(fn){
for (var p = this.ownerCt; (p != null) && !fn(p); p = p.ownerCt)
;
return p;
},
findParentByType: function(xtype){
return typeof xtype == 'function' ? this.findParentBy(function(p){
return p.constructor === xtype;
}) : this.findParentBy(function(p){
return p.constructor.xtype === xtype;
});
}
});

Ext.ux.currencyField = function(config){
// Add any numberfield default settings here:
var defaultConfig = {
allowDecimals: true,
allowNegative: false,
decimalPrecision: 2,
maxValue: 1000000000,
minValue: 0,
value: null,
selectOnFocus: true,
itemCls: 'rmoney'
};
Ext.ux.currencyField.superclass.constructor.call(this, Ext.apply(defaultConfig, config));

this.on('change', this._onChange, this);
this.on('initself', this._onInitSelf);
this.on('focus', this._onFocus);
this.on('blur', this._onBlur);
this.on('render', this._onRender);
this.currencyNumericValue = config.value || null;
}

Ext.extend(Ext.ux.currencyField, Ext.form.NumberField, {
currencyNumericValue: null,
initSelf: function(){
if (this.value === null || this.value === '') {
this.currencyNumericValue = null;
}
else {
this.currencyNumericValue = this.value;
}
this.setRawValue(this.formatter(this.currencyNumericValue));
this.originalValue = this.currencyNumericValue;
},
getValue: function(){
if (this.value === '' || this.value === null) {
return null;
}
else
if (isNaN(this.value)) {
this.value = 0;
}
else {
return Number(this.value);
}
},
_onChange: function(field, newVal, oldVal){
if (newVal === '') {
this.currencyNumericValue = null
}
else {
this.currencyNumericValue = newVal - 0;
}
},
_onRender: function(cmp){
this.setRawValue(this.formatter(this.currencyNumericValue));
if (this.isFormField) {
var parentForm = this.findParentByType('form');
parentForm.on('actioncomplete', function(){
cmp.initSelf();
});
parentForm.on('actionfailed', function(){
cmp.initSelf();
});
parentForm.on('afterLayout', function(){
cmp.initSelf();
});
}
},
formatter: function(value){
// detect app language & set the appropriate formatter
if (value === 0) {
return euroFormatter("0");
}
else {
return euroFormatter(value);
}
},
_onBlur: function(field){
if (field.getRawValue() == '') {
this.currencyNumericValue = null;
}
else {
this.currencyNumericValue = field.getRawValue() - 0;
}
field.setRawValue(this.formatter(this.currencyNumericValue));
if (this.currencyNumericValue !== this.value) {
this.value = this.currencyNumericValue;
}

},
_onFocus: function(field){
if (this.currencyNumericValue === null || this.currencyNumericValue === '') {
field.setRawValue('');
}
else {
field.setRawValue((this.currencyNumericValue - 0).toFixed(this.decimalPrecision));
}
},
initAllSiblings: function(){
if (this.isFormField) {
var parentForm = this.findParentByType('form');
var currencyFields = parentForm.findByType('currencyfield');
Ext.each(currencyFields, function(currencyfield){
currencyfield.initSelf();
});
}
}
});

Ext.ComponentMgr.registerType('currencyfield', Ext.ux.currencyField);


but still having problem when calling
isValid function....any suggestion?

seek
25 Jan 2010, 1:22 AM
I think to be on a right way, but maybe I run into a bug.
Here the complete call stack


value is null ext-all-debug.js Line 35877
validateValue(Object { name="value"})ext-all-debug.js (line 35877)
validateValue(Object { name="value"})currencyField.js (line 68)
validate()ext-all-debug.js (line 35408)
setValue(Object { name="v"})ext-all-debug.js (line 35520)
setValue(Object { name="v"})ext-all-debug.js (line 35862)
setValue(Object { name="v"})ext-all-debug.js (line 36385)
beforeBlur()ext-all-debug.js (line 36416)
onBlur()ext-all-debug.js (line 35375)
h(Object { name="e"})ext-all-debug.js (line 1934)
if(value.length < 1 || value === this.emptyText){ ext-all-debug.js (line 35877)
Maybe the red line must become:

if(value || value.length < 1 || value === this.emptyText)
But in my component I can't understand why the event fires 2 times...


if (Ext.util.Format) {
if (!Ext.util.Format.CurrencyFactory) {
Ext.util.Format.CurrencyFactory = function(dp, dSeparator, tSeparator, symbol){
return function(n){
if(!n){n=0;};
dp = Math.abs(dp) + 1 ? dp : 2;
dSeparator = dSeparator || ".";
tSeparator = tSeparator || ",";
var m = /(\d+)(?:(\.\d+)|)/.exec(n + ""), x = m[1].length > 3 ? m[1].length % 3 : 0;
return (n < 0 ? '-' : '') +
(x ? m[1].substr(0, x) + tSeparator : "") +
m[1].substr(x).replace(/(\d{3})(?=\d)/g, "$1" + tSeparator) +
(dp ? dSeparator + (+m[2] || 0).toFixed(dp).substr(2) : "") +
" " +
symbol;
};
}
}
};
var euroFormatter = Ext.util.Format.CurrencyFactory(2, ",", ".", "\u20AC");
var dollarFormatter = Ext.util.Format.CurrencyFactory(2, ",", ".", "$");

Ext.namespace('Ext.ux');

Ext.override(Ext.Component, {
// override by Animal (http://extjs.com/forum/showthread.php?t=26484) that
// allows us to find the dollar fields parent form. Very nice.
findParentBy: function(fn){
for (var p = this.ownerCt; (p != null) && !fn(p); p = p.ownerCt)
;
return p;
},
findParentByType: function(xtype){
return typeof xtype == 'function' ? this.findParentBy(function(p){
return p.constructor === xtype;
}) : this.findParentBy(function(p){
return p.constructor.xtype === xtype;
});
}
});

Ext.ux.currencyField = function(config){
// Add any numberfield default settings here:
var defaultConfig = {
//allowDecimals: true,
//allowNegative: true,
//decimalPrecision: 2,
//maxValue: 1000000000,
//minValue: 0,
//value: null,
selectOnFocus: true,
itemCls: 'rmoney' // to right-align dollar field, define style: .rmoney .x-form-field {text-align:right;}
};
Ext.ux.currencyField.superclass.constructor.call(this, Ext.apply(defaultConfig, config));

this.on('change', this._onChange, this);
this.on('initself', this._onInitSelf);
this.on('focus', this._onFocus);
this.on('blur', this._onBlur);
this.on('render', this._onRender);
this.currencyNumericValue = config.value || null;
}

Ext.extend(Ext.ux.currencyField, Ext.form.NumberField, {
currencyNumericValue: null,
validateValue : function(value){
value = this.currencyNumericValue;
if(!Ext.form.NumberField.superclass.validateValue.call(this, value)){
return false;
}
return true;
},
initSelf: function(){
// When form loads, bare number is loaded and displayed. Call this (via listener, typically)
// to format value to dollar.
if (this.value === null || this.value === '') {
this.currencyNumericValue = null;
}
else {
this.currencyNumericValue = this.value;
}
this.setRawValue(this.formatter(this.currencyNumericValue));
// prevent field from reporting itself as "dirty" after form load (isDirty check):
this.originalValue = this.currencyNumericValue;
},
getValue: function(){
//return this.value+"".replace(/[^0-9.-]/g,"")-0; strip out any formatting characters from string.
if (this.value === '' || this.value === null) {
return null;
}
else
if (isNaN(this.value)) {
this.value = 0;
}
else {
return Number(this.value);
}
},
_onChange: function(field, newVal, oldVal){
// n will always be unformatted numeric as STRING! So "-0" to force numeric type:
if (newVal === '') {
this.currencyNumericValue = null
}
else {
this.currencyNumericValue = newVal - 0;
}
},
_onRender: function(cmp){
this.setRawValue(this.formatter(this.currencyNumericValue));
if (this.isFormField) { // Is this check necessary?
var parentForm = this.findParentByType('form');
/*
Note: If client-side validation is enabled, unformatted numbers get posted on save. Good!
(The field's "isValid" method just does this for some reason, which works to our advantage.)
BUT (there's always a "but"), we then need to apply back the dollar formatting so that the
numbers aren't left displayed as plain.
*/
// Format dollar after successful form save:
parentForm.on('actioncomplete', function(){
cmp.initSelf();
});
// Format back to dollar after failed save attempt.
parentForm.on('actionfailed', function(){
cmp.initSelf();
});
// doLayout is called on initial page load.
parentForm.on('afterLayout', function(){
cmp.initSelf();
});
// Formats dollar after client-side validation fails...maybe...still investigating this.
// parentForm.on('beforeaction', function(){cmp.initSelf();});
/*
Depends on order of any success/actioncomplete/actionfailed listeners???
Or maybe you are checking if the form isValid yourself by listening to the
form's beforeaction, type action.type=='submit' and then returning false to
cancel the action. Still looking into all this.
More on clientValidation:
Before the form submits (doAction 'submit' with clientValidation not set to false...
from docs: "If undefined, pre-submission field validation is performed.") the call
to form "isValid" will turn the dollarfield back to a plain, unformatted number,
which will get posted.
*/
}
},
formatter: function(value){
if (value === '') {
return '';
}
else {
return euroFormatter(value);
}
},
_onBlur: function(field){
/* always update dollarNumericValue with the actual RawValue (which right here (onBlur) will
*always* be numeric (remember: when focused, it's unformatted numeric entry...just like
numberfield does. So onBlur, grab that numeric value and save it to this.dollarNumericValue,
then apply formatting back to RawValue for display.
*/
if (field.getRawValue() == '') {
this.currencyNumericValue = null;
}
else {
this.currencyNumericValue = field.getRawValue() - 0;
}
field.setRawValue(this.formatter(this.currencyNumericValue));
if (this.currencyNumericValue !== this.value) {
/* for some reason, when zero'ing out a value (or clearing), the onChange event is not firing
and this.value is not getting set to the new zero or blank value. This fixes that:
*/
this.value = this.currencyNumericValue;
}
},
_onFocus: function(field){
if (this.currencyNumericValue === null || this.currencyNumericValue === '') {
field.setRawValue('');
}
else {
// remove formatting by restoring RawValue to dollarNumericValue.
field.setRawValue((this.currencyNumericValue - 0).toFixed(this.decimalPrecision));
}
},
initAllSiblings: function(){
/* Perhaps useful to call this manually when having trouble getting the event listeners straightened
out as described above
*/
if (this.isFormField) { // Is this check necessary?
var parentForm = this.findParentByType('form');
var currencyFields = parentForm.findByType('currencyfield');
Ext.each(currencyFields, function(currencyfield){
currencyfield.initSelf();
});
}
}
});
Ext.ComponentMgr.registerType('currencyfield', Ext.ux.currencyField);


Any help will be appreciated
Seek

Animal
25 Jan 2010, 1:25 AM
I think a currency plugin for the NumberField class would work much better.

Remove any currency sign, commas etc on focus, and format according to configured currency or format string on blur if valid.

seek
26 Jan 2010, 7:03 AM
I think a currency plugin for the NumberField class would work much better.

Remove any currency sign, commas etc on focus, and format according to configured currency or format string on blur if valid.

You are talking about something like this? :-/
(sorry if I take advantage from you)


Ext.ux.campoValuta = function(config){
Ext.apply(this, config);
};

// plugin code
Ext.extend(Ext.ux.campoValuta, Ext.form.NumberField, {
init: function(campo){
campo.numberValue = campo.value;
},
focus: function(selectText, delay){
this.value = this.numberValue;
},
blur: function(campo){
this.setValue(currencyFormatter(this.numberValue));
},
onRender: function(ct, position){
this.value = currencyFormatter(this.numberValue);
}
});

Animal
26 Jan 2010, 10:41 AM
Well, the idea is there, but I really like the idea of plugins.

seek
29 Jan 2010, 8:42 AM
Well, the idea is there, but I really like the idea of plugins.

Could you provide me a simple example about a plugin with Ext.form.****Field?
I try and retry, but I can't do it without a suitable example, all samples about plugin can't give me the correct idea on how to implement it...

Thanks for all help you can give me!
Seek

seek
29 Jan 2010, 8:54 AM
Maybe I found what are you exactly talking about....


Ext.ux.dispCurr = function(){
this.init = function(tp){
edit = tp;
edit.on('blur', onBlur);
edit.on('focus', onFocus);
}
function onBlur(){
}
function onFocus(){
}
};
(Excuse me if I press you...)

seek
1 Feb 2010, 8:08 AM
I almost see the light... :-?
How to replace the rawvalue with another value before submit ??

Thanks


Ext.ux.dispCurr = function(){
var edit, currencyNumericValue, ctxItem;
this.init = function(tp){
edit = tp;
v = readApexValue();
if (v == '') {
currencyNumericValue = null;
}
else {
currencyNumericValue = v;
}
edit.on('blur', onBlur);
edit.on('focus', onFocus);
edit.on('afterrender', afterrender);
//edit.on('post', onPost);
}
//I must fight with Oracle Application Express....
function readApexValue(){
var v = edit.getRawValue();
if (v === "") {
return null;
};
v = Number(v.replace(/,/, "."));
return v;
}

function onBlur(){
var c = readApexValue();
if (c === '') {
currencyNumericValue = null;
}
else {
currencyNumericValue = c;
}
edit.setRawValue(Ext.util.Format.currencyFormatter(currencyNumericValue));
if (currencyNumericValue !== edit.value) {
edit.value = currencyNumericValue;
}
}

function onFocus(){
if (currencyNumericValue === null || currencyNumericValue === '') {
edit.setRawValue('');
}
else {
edit.setRawValue((currencyNumericValue - 0).toFixed(edit.decimalPrecision));
}
}

function afterrender(){
edit.setRawValue(Ext.util.Format.currencyFormatter(currencyNumericValue));
}

// function onPost(){
// edit.setRawValue(currencyNumericValue);
// }
};

ToZie
4 Jul 2010, 12:37 AM
I almost see the light... :-?
How to replace the rawvalue with another value before submit ??


I have taken an Idea from Saki to work around this submit problem. A hidden field with same name and name removed from original field will do the trick if the raw value is maintained there.



Ext.ns('Ext.ux.form');

Ext.ux.form.xNumberField = Ext.extend(Ext.form.NumberField, {
displayUnit: null,
forcePrecision: null,
setValue: function(value) {
if (!this.hiddenField) {
this.hiddenField = this.el.insertSibling({
tag: 'input',
type: 'hidden',
name: this.name
});
this.hiddenName = this.name;
this.el.dom.name = null;
this.el.on({
blur: {
scope: this,
fn: this.doBlur
},
focus: {
scope: this,
fn: this.doFocus
},
keyup: {
scope: this,
fn: this.doKeyup
}
});
}
this.setRawValue(value);
this.initField();
},
doBlur: function() {
this.updateHidden();
this.setRawValue(this.formatValue(this.getValue()));
},
doFocus: function() {
this.setRawValue(this.hiddenField.dom.value);
},
doKeyup: function() {
this.updateHidden();
},
updateHidden: function() {
var value = this.getValue();
value = value.toString().replace(/\./, ",");
this.hiddenField.dom.value = value;
},
initField: function() {
this.updateHidden();
this.setRawValue(this.formatValue(this.getValue()));
},
getRawValue: function() {
return this.hiddenField.dom.value;
},
formatValue: function(value) {
value = parseFloat(value);
if (!value) {
value = 0
};
if (this.forcePrecision && (this.forcePrecision > 0)) {
value = value.toFixed(this.forcePrecision);
}
value = value.toString().replace(/\./, ",");
if (this.displayUnit) {
value = value + this.displayUnit;
}
return value;
}
});
Ext.reg('xnumberfield', Ext.ux.form.xNumberField);
There are some inconsistencies in IE8, tabbing in the field does not mark it's content (since the content get's overwritten on Focus).

lg

Torsten

alien3d
4 Jul 2010, 1:51 AM
Ext.apply(Ext.form.VTypes,{
'dollar':function () {
var regex = /^\$?[0-9]+(,[0-9]{3})*(\.[0-9]{2})?$/;
return function(strValue) {
if(!regex(strValue)) {
return false;
}
}
},
dollarMask:/[\d\$\,,.]/,
dollarText:'Not a valid dollar amount. Must be in the format "$230.45" ($ symbol and cents optional).'

});
** the original one don't work on IE8 so i change a little bit


var cop_lon_trg_amt = new Ext.form.TextField({
labelAlign: 'left',
fieldLabel: 'Amount',

name: 'cop_lon_trg_amt',
id: 'cop_lon_trg_amt',
allowBlank: false,
blankText: 'Sila isi Amount Target',

vtype:'dollar',
anchor: '95%',
listeners: {
blur: function(){
var value = Ext.getCmp('cop_lon_trg_amt').getValue();
value = value.replace(",", ""); // remove coma first
value = Ext.util.Format.usMoney(value);
value = value.replace(" ", ""); // quite odd space problem
Ext.getCmp('cop_lon_trg_amt').setValue(value);
}
}
});
If any people can short cut it .okays .

brittongr
6 Mar 2011, 6:40 AM
I just added my own extension maybe it can helps others...

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