Results 1 to 10 of 10

Thread: Ext.ux.MoneyField

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

    Thumbs up 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
      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
      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
      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
      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
      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
      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
      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
    378
    Vote Rating
    9
      0  

    Thumbs up 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
      0  

    Default Adaptar ao Ext.NEt

    possvel adaptar esse cdigo ao ext.net?

    Eu cheguei a tentar porm ocorre-me o erro que o cdigo acima no possui o mtodo init

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •