PDA

View Full Version : Ext.ux.MoneyField



daviscabral
8 Oct 2007, 12:18 PM
Ext.ux.MoneyField = function(config){
var defConfig = {
autocomplete: 'off',
format: 'BRL',
currency: 'R$',
showCurrency: true
};
Ext.applyIf(config,defConfig);
Ext.ux.MoneyField.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.MoneyField, Ext.form.TextField,{

initEvents : function(){
Ext.ux.MoneyField.superclass.initEvents.call(this);
this.el.on('keydown',this.stopEventFunction,this);
this.el.on("keypress", this.mapCurrency,this);
this.el.on("keyup", this.stopEventFunction,this);
},

formatCurrency : function(evt, floatPoint, decimalSep, thousandSep) {
floatPoint = !isNaN(floatPoint) ? Math.abs(floatPoint) : 2;
thousandSep = typeof thousandSep != "string" ? "," : thousandSep;
decimalSep = typeof decimalSep != "string" ? "." : decimalSep;
var key = evt.getKey();
var character = (key > 47 && key < 58 ? String.fromCharCode(key) : "");
var field = this.el.dom;
var value = (field.value.replace(/\D/g, "").replace(/^0+/g, "") + character).replace(/\D/g, "");
var length = value.length;

if ( character == "" && length > 0 && key == 8) {
length--;
value = value.substr(0,length);
evt.stopEvent();
}

if(field.maxLength + 1 && length >= field.maxLength) return false;

length <= floatPoint && (value = new Array(floatPoint - length + 2).join("0") + value);
for(var i = (length = (value = value.split("")).length) - floatPoint; (i -= 3) > 0; value[i - 1] += thousandSep);
floatPoint && floatPoint < length && (value[length - ++floatPoint] += decimalSep);
field.value = (this.showCurrency && this.currencyPosition == 'left' ? this.currency : '' ) +
value.join("") +
(this.showCurrency && this.currencyPosition == 'right' ? this.currency : '' );
},

mapCurrency : function(evt) {
switch (this.format) {
case 'BRL':
this.currency = 'R$ ';
this.currencyPosition = 'left';
this.formatCurrency(evt, 2,',','.');
break;

case 'EUR':
this.currency = ' €';
this.currencyPosition = 'right';
this.formatCurrency(evt, 2,',','.');
break;

case 'USD':
this.currencyPosition = 'left';
this.currency = '$';
this.formatCurrency(evt, 2);
break;

default:
this.formatCurrency(evt, 2);
}
},

stopEventFunction : function(evt) {
var key = evt.getKey();

if ( (( key>=41 && key<=122 ) || key==32 || key>186) && (!evt.altKey && !evt.ctrlKey) ) {
evt.stopEvent();
}
}
});

BKrisz79
23 Dec 2007, 1:37 AM
I've tried to add this row at the end:
Ext.reg('uxmoneyfield',Ext.ux.MoneyField);

and this rows in the switch:

case 'FT':
this.currencyPosition = 'right';
this.currency = ' Ft';
this.formatCurrency(evt, 2);
break;

I try to initialize like this on a form:
[PHP]....
},{
xtype: 'uxmoneyfield',
fieldLabel: 'Terv. k

halkon_polako
23 Dec 2007, 5:26 AM
Have you defined the namespace for Ext.ux in somewhere of your code?



Ext.namespace("Ext.ux");

markfigley
27 Jan 2008, 4:40 PM
Hello Davis,
Looks like this code does on work on IE 6. It worked on Firefox though. Can you confirm this?

Regards

markfigley
27 Jan 2008, 4:58 PM
I think the function stopEventFunction is causing the problem. Swapping the keypress and keydown events makes it working in IE.

BTW, good work Davis:)

daviscabral
27 Jan 2008, 6:31 PM
Hi man!

Thanks and heere follow the last version (works on FF and IE) to Ext 2.0:


Ext.ux.MoneyField = function(config){
var defConfig = {
autocomplete: 'off',
allowNegative: true,
format: 'BRL',
currency: 'R$',
showCurrency: true
};
Ext.applyIf(config,defConfig);
Ext.ux.MoneyField.superclass.constructor.call(this, config);
};
Ext.extend(Ext.ux.MoneyField, Ext.form.TextField,{

/*initComponent:function() {

},*/

initEvents : function(){
Ext.ux.MoneyField.superclass.initEvents.call(this);
this.el.on("keydown",this.stopEventFunction,this);
this.el.on("keyup", this.mapCurrency,this);
this.el.on("keypress", this.stopEventFunction,this);
},

KEY_RANGES : {
numeric: [48, 57],
padnum: [96, 105]
},

isInRange : function(charCode, range) {
return charCode >= range[0] && charCode <= range[1];
},

formatCurrency : function(evt, floatPoint, decimalSep, thousandSep) {
floatPoint = !isNaN(floatPoint) ? Math.abs(floatPoint) : 2;
thousandSep = typeof thousandSep != "string" ? "," : thousandSep;
decimalSep = typeof decimalSep != "string" ? "." : decimalSep;
var key = evt.getKey();

if (this.isInRange(key, this.KEY_RANGES["padnum"])) {
key -= 48;
}

this.sign = (this.allowNegative && (key == 45 || key == 109)) ? "-" : (key == 43 || key == 107 || key == 16) ? "" : this.sign;

var character = (this.isInRange(key, this.KEY_RANGES["numeric"]) ? String.fromCharCode(key) : "");
var field = this.el.dom;
var value = (field.value.replace(/\D/g, "").replace(/^0+/g, "") + character).replace(/\D/g, "");
var length = value.length;

if ( character == "" && length > 0 && key == 8) {
length--;
value = value.substr(0,length);
evt.stopEvent();
}

if(field.maxLength + 1 && length >= field.maxLength) return false;

length <= floatPoint && (value = new Array(floatPoint - length + 2).join("0") + value);
for(var i = (length = (value = value.split("")).length) - floatPoint; (i -= 3) > 0; value[i - 1] += thousandSep);
floatPoint && floatPoint < length && (value[length - ++floatPoint] += decimalSep);
field.value = (this.showCurrency && this.currencyPosition == 'left' ? this.currency : '' ) +
(this.sign ? this.sign : '') +
value.join("") +
(this.showCurrency && this.currencyPosition != 'left' ? this.currency : '' );
},

mapCurrency : function(evt) {
switch (this.format) {
case 'BRL':
this.currency = 'R$ ';
this.currencyPosition = 'left';
this.formatCurrency(evt, 2,',','.');
break;

case 'EUR':
this.currency = ' €';
this.currencyPosition = 'right';
this.formatCurrency(evt, 2,',','.');
break;

case 'USD':
this.currencyPosition = 'left';
this.currency = '$';
this.formatCurrency(evt, 2);
break;

default:
this.formatCurrency(evt, 2);
}
},

stopEventFunction : function(evt) {
var key = evt.getKey();

if (this.isInRange(key, this.KEY_RANGES["padnum"])) {
key -= 48;
}

if ( (( key>=41 && key<=122 ) || key==32 || key==8 || key>186) && (!evt.altKey && !evt.ctrlKey) ) {
evt.stopEvent();
}
},

getCharForCode : function(keyCode){
var chr = '';
switch(keyCode) {
case 48: case 96: // 0 and numpad 0
chr = '0';
break;

case 49: case 97: // 1 and numpad 1
chr = '1';
break;

case 50: case 98: // 2 and numpad 2
chr = '2';
break;

case 51: case 99: // 3 and numpad 3
chr = '3';
break;

case 52: case 100: // 4 and numpad 4
chr = '4';
break;

case 53: case 101: // 5 and numpad 5
chr = '5';
break;

case 54: case 102: // 6 and numpad 6
chr = '6';
break;

case 55: case 103: // 7 and numpad 7
chr = '7';
break;

case 56: case 104: // 8 and numpad 8
chr = '8';
break;

case 57: case 105: // 9 and numpad 9
chr = '9';
break;

case 45: case 189: case 109:
chr = '-';
break;

case 43: case 107: case 187:
chr = '+';
break;

default:
chr = String.fromCharCode(keyCode); // key pressed as a lowercase string
break;
}
return chr;
}
});

Ext.ComponentMgr.registerType('moneyfield', Ext.ux.MoneyField);

jezmck
10 Apr 2008, 4:51 AM
It looks good, but if you were to use these in a form the currecy symbol and the thousands seperator would get posted too.

daviscabral
10 Apr 2008, 6:12 AM
This is right. On submit I clean this, and if I got errors, I put the symbol again...
Like this:


(...)
buttons: [{
text: 'Salvar',
handler: function(botao) {
botao.disable();
var formulario = Ext.WindowMgr.getActive().getComponent(0).getForm();

var campoValorImplantacao = formulario.findField('Pacote.ValorImplantacao');
var valorImplantacao = T5.Utils.limpaMoeda(campoValorImplantacao);
campoValorImplantacao.el.dom.value = valorImplantacao[1];

(...)

Ext.WindowMgr.getActive().getComponent(0).getForm().submit({
(...)

failure: function(form, action) {
T5.MensagemErro(form,action);
campoValorImplantacao.el.dom.value = valorImplantacao[0];
(...)

T5.Utils.limpaMoeda:

T5.Utils = {};
T5.Utils = function(){
return {
limpaMoeda : function(objeto){
var valores = new Array();
valores.push(objeto.el.dom.value);
valores.push(objeto.el.dom.value.replace(/[^0-9,.-]/g,""));
return valores;
}
}
}

ethraza
10 Jul 2009, 4:11 PM
A little contribution update.
I added the options unmaskRe (RegEx) that is the regex used on getValue to take out the mask if the getUnmasked (Bool) is set to true (default) and added the automask on setValue, that is a must on forms load.


Ext.ux.MoneyField = function(config){
var defConfig = {
autocomplete: 'off',
allowNegative: true,
format: 'USD',
currency: '$',
showCurrency: true,
unmaskRe: /[^0-9.-]/g,
getUnmasked: true
};
Ext.applyIf(config,defConfig);
Ext.ux.MoneyField.superclass.constructor.call(this, config);
};

Ext.extend(Ext.ux.MoneyField, Ext.form.TextField,{

/*initComponent:function() {

},*/

initEvents : function(){
Ext.ux.MoneyField.superclass.initEvents.call(this);
this.el.on("keydown",this.stopEventFunction,this);
this.el.on("keyup", this.mapCurrency,this);
this.el.on("keypress", this.stopEventFunction,this);
},

KEY_RANGES : {
numeric: [48, 57],
padnum: [96, 105]
},

isInRange : function(charCode, range) {
return charCode >= range[0] && charCode <= range[1];
},

formatCurrency : function(evt, floatPoint, decimalSep, thousandSep) {
if (!this.el) return false;
floatPoint = !isNaN(floatPoint) ? Math.abs(floatPoint) : 2;
thousandSep = typeof thousandSep != "string" ? "," : thousandSep;
decimalSep = typeof decimalSep != "string" ? "." : decimalSep;
var key = (evt.getKey)? evt.getKey() : 0;

if (this.isInRange(key, this.KEY_RANGES["padnum"])) {
key -= 48;
}

this.sign = (this.allowNegative && (key == 45 || key == 109)) ? "-" : (key == 43 || key == 107 || key == 16) ? "" : this.sign;

var character = (this.isInRange(key, this.KEY_RANGES["numeric"]) ? String.fromCharCode(key) : "");
var field = this.el.dom;
var value = (field.value.replace(/\D/g, "").replace(/^0+/g, "") + character).replace(/\D/g, "");
var length = value.length;

if ( character == "" && length > 0 && key == 8) {
length--;
value = value.substr(0,length);
evt.stopEvent();
}

if(field.maxLength + 1 && length >= field.maxLength) return false;

length <= floatPoint && (value = new Array(floatPoint - length + 2).join("0") + value);
for(var i = (length = (value = value.split("")).length) - floatPoint; (i -= 3) > 0; value[i - 1] += thousandSep);
floatPoint && floatPoint < length && (value[length - ++floatPoint] += decimalSep);
field.value = (this.showCurrency && this.currencyPosition == 'left' ? this.currency : '' ) +
(this.sign ? this.sign : '') +
value.join("") +
(this.showCurrency && this.currencyPosition != 'left' ? this.currency : '' );
},

mapCurrency : function(evt) {
switch (this.format) {
case 'BRL':
this.currency = 'R$ ';
this.currencyPosition = 'left';
this.formatCurrency(evt, 2,',','.');
break;

case 'EUR':
this.currency = ' €';
this.currencyPosition = 'right';
this.formatCurrency(evt, 2,',','.');
break;

case 'USD':
this.currencyPosition = 'left';
this.currency = '$';
this.formatCurrency(evt, 2);
break;

default:
this.formatCurrency(evt, 2);
}
},

stopEventFunction : function(evt) {
var key = evt.getKey();

if (this.isInRange(key, this.KEY_RANGES["padnum"])) {
key -= 48;
}

if ( (( key>=41 && key<=122 ) || key==32 || key==8 || key>186) && (!evt.altKey && !evt.ctrlKey) ) {
evt.stopEvent();
}
},

getCharForCode : function(keyCode){
var chr = '';
switch(keyCode) {
case 48: case 96: // 0 and numpad 0
chr = '0';
break;

case 49: case 97: // 1 and numpad 1
chr = '1';
break;

case 50: case 98: // 2 and numpad 2
chr = '2';
break;

case 51: case 99: // 3 and numpad 3
chr = '3';
break;

case 52: case 100: // 4 and numpad 4
chr = '4';
break;

case 53: case 101: // 5 and numpad 5
chr = '5';
break;

case 54: case 102: // 6 and numpad 6
chr = '6';
break;

case 55: case 103: // 7 and numpad 7
chr = '7';
break;

case 56: case 104: // 8 and numpad 8
chr = '8';
break;

case 57: case 105: // 9 and numpad 9
chr = '9';
break;

case 45: case 189: case 109:
chr = '-';
break;

case 43: case 107: case 187:
chr = '+';
break;

default:
chr = String.fromCharCode(keyCode); // key pressed as a lowercase string
break;
}
return chr;
},

setValue : function(v){
if(this.emptyText && this.el && v !== undefined && v !== null && v !== ''){
this.el.removeClass(this.emptyClass);
}
Ext.form.TextField.superclass.setValue.apply(this, arguments);
this.applyEmptyText();
this.autoSize();
this.mapCurrency(0);
},

getValue : function(){
if(!this.rendered) {
return this.value;
}
var v = this.el.getValue();
if(v === this.emptyText || v === undefined){
v = '';
}
if (v && this.getUnmasked)
v = v.replace(this.unmaskRe, '');
return v;
}
});
Ext.reg('moneyfield', Ext.ux.MoneyField); Thanks! Valeu! ;)

gbalista
19 Mar 2013, 6:06 AM
É possível adaptar esse código ao ext.net?

Eu cheguei a tentar porém ocorre-me o erro que o código acima não possui o método init