1. #1
    Ext User daviscabral's Avatar
    Join Date
    May 2007
    Location
    Cascavel / PR / Brazil
    Posts
    45
    Vote Rating
    0
    daviscabral is on a distinguished road

      0  

    Thumbs up Ext.ux.MoneyField

    Ext.ux.MoneyField


    Code:
    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(); 
    		}
    	}
    });

  2. #2
    Ext User
    Join Date
    Nov 2007
    Posts
    62
    Vote Rating
    0
    BKrisz79 is on a distinguished road

      0  

    Default


    I've tried to add this row at the end:
    Ext.reg('uxmoneyfield',Ext.ux.MoneyField);

    and this rows in the switch:
    PHP Code:
            case 'FT':                
                
    this.currencyPosition 'right';
                
    this.currency ' Ft';
              
    this.formatCurrency(evt2); 
              break; 
    I try to initialize like this on a form:
    [PHP]....
    },{
    xtype: 'uxmoneyfield',
    fieldLabel: 'Terv. k

  3. #3
    Ext User halkon_polako's Avatar
    Join Date
    Nov 2007
    Location
    Barcelona
    Posts
    193
    Vote Rating
    0
    halkon_polako is on a distinguished road

      0  

    Question


    Have you defined the namespace for Ext.ux in somewhere of your code?

    Code:
    Ext.namespace("Ext.ux");

  4. #4
    Ext User
    Join Date
    Sep 2007
    Posts
    71
    Vote Rating
    0
    markfigley is on a distinguished road

      0  

    Default


    Hello Davis,
    Looks like this code does on work on IE 6. It worked on Firefox though. Can you confirm this?

    Regards

  5. #5
    Ext User
    Join Date
    Sep 2007
    Posts
    71
    Vote Rating
    0
    markfigley is on a distinguished road

      0  

    Default


    I think the function stopEventFunction is causing the problem. Swapping the keypress and keydown events makes it working in IE.

    BTW, good work Davis

  6. #6
    Ext User daviscabral's Avatar
    Join Date
    May 2007
    Location
    Cascavel / PR / Brazil
    Posts
    45
    Vote Rating
    0
    daviscabral is on a distinguished road

      0  

    Default


    Hi man!

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

    Code:
    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);

  7. #7
    Ext User jezmck's Avatar
    Join Date
    Jan 2008
    Location
    UK
    Posts
    128
    Vote Rating
    0
    jezmck is an unknown quantity at this point

      0  

    Default


    It looks good, but if you were to use these in a form the currecy symbol and the thousands seperator would get posted too.

  8. #8
    Ext User daviscabral's Avatar
    Join Date
    May 2007
    Location
    Cascavel / PR / Brazil
    Posts
    45
    Vote Rating
    0
    daviscabral is on a distinguished road

      0  

    Default


    This is right. On submit I clean this, and if I got errors, I put the symbol again...
    Like this:

    Code:
    (...)
    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:
    Code:
    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;
            }
        }
    }

  9. #9
    Sencha Premium Member ethraza's Avatar
    Join Date
    Jun 2007
    Location
    Brazil
    Posts
    362
    Vote Rating
    3
    ethraza is on a distinguished road

      0  

    Thumbs up Update

    Update


    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.

    Code:
    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!
    LAMPE (Linux / Apache / MySQL / PHP / ExtJs)

  10. #10
    Sencha User
    Join Date
    Sep 2012
    Posts
    1
    Vote Rating
    0
    gbalista is on a distinguished road

      0  

    Default Adaptar ao Ext.NEt

    Adaptar ao Ext.NEt


    É 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