1. #41
    Sencha User brittongr's Avatar
    Join Date
    Jun 2007
    Location
    Panama
    Posts
    109
    Vote Rating
    3
    brittongr is on a distinguished road

      0  

    Default


    This should work:

    new Ext.ux.NumericField({ currencySymbol: '€', alwaysDisplayDecimals: true, thousandSeparator:' ' });

    If you set decimalSeparator: ',' it will use comma instead of ".".
    Greivin Britton

    My Extensions:
    Ext.ux.NumericField: Number field with support for currencySymbol, thousand separator, international...
    Ext.ux.PagerSizeSelector: A plugin that allows the change page size with just one click.
    Ext.ux.FieldAccess: A plugin to let the user know which fields are editable.

  2. #42
    Sencha User
    Join Date
    Jan 2010
    Posts
    1
    Vote Rating
    0
    bmossavari is on a distinguished road

      0  

    Thumbs up format number at keydown instead of blur

    format number at keydown instead of blur


    First of all thank you for such a useful UX,
    I used it and it's working fine but I need the filed to render thousand separator on keydown instead of blur event
    currently users should first type the number and set focus on next filed to see if he put correct number or not

    please advise....

  3. #43
    Sencha User brittongr's Avatar
    Join Date
    Jun 2007
    Location
    Panama
    Posts
    109
    Vote Rating
    3
    brittongr is on a distinguished road

      0  

    Default


    Try setting the key down event and call field.validate(); i'm not remember right now if fields are using a delayed task to validate inputs after some milliseconds, and if not, then i think that will be the right way to do it.
    Greivin Britton

    My Extensions:
    Ext.ux.NumericField: Number field with support for currencySymbol, thousand separator, international...
    Ext.ux.PagerSizeSelector: A plugin that allows the change page size with just one click.
    Ext.ux.FieldAccess: A plugin to let the user know which fields are editable.

  4. #44
    Sencha User
    Join Date
    Jul 2011
    Posts
    2
    Vote Rating
    0
    JIffOrange is on a distinguished road

      0  

    Default


    Thank you ....was just what I was dreading having to do myself. Saved me a few hours work, many thanks for this very useful contribution.

    Jon

  5. #45
    Sencha User
    Join Date
    Mar 2011
    Posts
    2
    Vote Rating
    0
    napoleonit76 is on a distinguished road

      0  

    Default


    When I use your customized NumericField, I can not submit value from it as "number value", and it is always String type (including the comma separator). Do we have any config to force it to submit integer type instead of String type, or we have to do it manually?
    Thank you.

  6. #46
    Sencha User
    Join Date
    Sep 2011
    Posts
    7
    Vote Rating
    0
    ashwin.parmar is on a distinguished road

      0  

    Default


    Thank You all

  7. #47
    Sencha User
    Join Date
    Jul 2010
    Posts
    30
    Vote Rating
    0
    ivone_tarigan is on a distinguished road

      0  

    Default


    hayy Greivin Britton.. thanks for your extension..
    i used EXT 2.3
    but it doesnt work for my numberField when i input with bilion price and displaying message "is not valid number"
    this is my code..
    Code:
     
    items: [{
                    xtype: 'numericfield',
                    fieldLabel: 'Estimated Price',
                    anchor: '55%',            
                    name: 'cer_estPrice',
                    id: 'cer_est.Price',
                    useThousandSeparator: true,
                    thousandSeparator:'.',
                    currencySymbol: null,
                    alwaysDisplayDecimals: false
    
                }]
    [IMG]numberfield.GIF [/IMG]

    thanks before..

  8. #48
    Sencha Premium Member
    Join Date
    Apr 2011
    Posts
    26
    Vote Rating
    0
    Link_ is on a distinguished road

      0  

    Default Congratulations Britto!!!!!

    Congratulations Britto!!!!!


    Quote Originally Posted by brittongr View Post
    Try setting the key down event and call field.validate(); i'm not remember right now if fields are using a delayed task to validate inputs after some milliseconds, and if not, then i think that will be the right way to do it.
    I want to thank you, for this plugin creation.
    I've been looking for something like this plugin for a long time ago, and this one seems to be the most reliable that i have found.

    I live in Uberlândia-MG - Brasil, come visit our city some day.

    Embrace

  9. #49
    Sencha User
    Join Date
    Jul 2014
    Posts
    2
    Vote Rating
    0
    phaiemko123 is on a distinguished road

      0  

    Default


    it does not work, anybody can help me.Thanks

  10. #50
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    120
    Vote Rating
    7
    chamacs is on a distinguished road

      0  

    Default


    Just in case someone needs this, here is an updated version of the NumericField that is supported in ExtJS 5.0.1, along with various mods discussed in this thread and the 'User Extension' (http://www.sencha.com/forum/showthre...t-ExtJS4/page3) thread.

    Code:
    /* * GNU General Public License Usage
     * This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file.  Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
     *
     * http://www.gnu.org/licenses/lgpl.html
     *
     * @description: This class provide additional format to numbers by extending Ext.form.field.Number
     *
     * @author: Greivin Britton
     * @email: brittongr@gmail.com
     * @version: 2 compatible with ExtJS 4 (And ExtJS 5 - chamacs)
     */
    Ext.define('Ext.ux.form.NumericField', {
        extend: 'Ext.form.field.Number',//Extending the NumberField
        alias: 'widget.numericfield',//Defining the xtype
        
        currencySymbol: null,
        
        // MOD - chamacs
        // @private
        isCurrency : false,
        
        // MOD - pmiguelmartins
        currencySymbolPos : 'left', // left , right
        
        useThousandSeparator: true,
        thousandSeparator: ',',
        alwaysDisplayDecimals: false,
        // MOD - chamacs
        //fieldStyle: 'text-align: right;',
        
        // MOD - chamacs
        allowExponential : false,
        
        /**
         * initComponent
         */
        initComponent: function(){
            if (this.useThousandSeparator && this.decimalSeparator == ',' && this.thousandSeparator == ',') {
                this.thousandSeparator = '.';
            }
            else if (this.allowDecimals && this.thousandSeparator == '.' && this.decimalSeparator == '.') {
                this.decimalSeparator = ',';
            }
            
            // MOD - chamacs
            this.isCurrency = !Ext.isEmpty(this.currencySymbol);
            
            this.callParent(arguments);
        },
        
        /**
         * setValue
         */
        setValue: function(value){
            // MOD - chamacs
            Ext.ux.form.NumericField.superclass.setValue.apply(this, [value != null ? value.toString().replace('.', this.decimalSeparator) : value]);
            
            this.setRawValue(this.getFormattedValue(this.getValue()));
        },
        
        /**
         * getFormattedValue
         */
        getFormattedValue: function(value){
            if (Ext.isEmpty(value) || !this.hasFormat()) {
                return value;
            }
            else {
                var neg = null;
                
                value = (neg = value < 0) ? value * -1 : value;
                value = this.allowDecimals && this.alwaysDisplayDecimals ? value.toFixed(this.decimalPrecision) : value;
                
                if (this.useThousandSeparator) {
                    if (this.useThousandSeparator && Ext.isEmpty(this.thousandSeparator)) {
                        throw ('NumberFormatException: invalid thousandSeparator, property must has a valid character.');
                    }
                    if (this.thousandSeparator == this.decimalSeparator) {
                        throw ('NumberFormatException: invalid thousandSeparator, thousand separator must be different from decimalSeparator.');
                    }
                    
                    value = value.toString();
                    
                    var ps = value.split('.');
                    ps[1] = ps[1] ? ps[1] : null;
                    
                    var whole = ps[0];
                    
                    var r = /(\d+)(\d{3})/;
                    
                    var ts = this.thousandSeparator;
                    
                    while (r.test(whole)) {
                        whole = whole.replace(r, '$1' + ts + '$2');
                    }
                    
                    value = whole + (ps[1] ? this.decimalSeparator + ps[1] : '');
                }
                
                // MOD - pmiguelmartins - updated by chamacs
                var position1 = this.isCurrency ? this.currencySymbol + ' ' : '';
                var position2 = value;
                if (this.currencySymbolPos === 'right') {
                    position1 = value;
                    position2 = this.isCurrency ? ' ' + this.currencySymbol : '';
                }
                return Ext.String.format('{0}{1}{2}', (neg ? '-'  : ''), position1, position2);
            }
        },
        
        /**
         * overrides parseValue to remove the format applied by this class
         */
        parseValue: function(value){
            // MOD - chamacs
            //Replace the currency symbol and thousand separator
            return Ext.ux.form.NumericField.superclass.parseValue.apply(this, [this.removeFormat(value)]);
        },
        
        /**
         * Remove only the format added by this class to let the superclass validate with it's rules.
         * @param {Object} value
         */
        removeFormat: function(value){
            // MOD - chamacs
            if (Ext.isEmpty(value)) {
                return '';
            }
            else if (!this.hasFormat()) {
                return value;
            }
            else {
                // MOD - bhaidaya
                value = Ext.String.trim(value.toString().replace(this.currencySymbol, ''));
                
                value = this.useThousandSeparator ? value.replace(new RegExp('[' + this.thousandSeparator + ']', 'g'), '') : value;   
                return value;
            }
        },
        
        /**
         * Remove the format before validating the the value.
         * @param {Number} value
         */
        getErrors: function(value) {
            // MOD - chamacs
            return Ext.ux.form.NumericField.superclass.getErrors.apply(this, [this.removeFormat(value)]);
        },
        
        /**
         * hasFormat
         */
        hasFormat: function() {
            return this.decimalSeparator != '.' || (this.useThousandSeparator == true && this.getRawValue() != null) || !Ext.isEmpty(this.currencySymbol) || this.alwaysDisplayDecimals;
        },
        
        /**
         * Display the numeric value with the fixed decimal precision and without the format using the setRawValue, don't need to do a setValue because we don't want a double
         * formatting and process of the value because beforeBlur perform a getRawValue and then a setValue.
         */
        onFocus: function() {
            this.setRawValue(this.removeFormat(this.getRawValue()));
            
            this.callParent(arguments);
        },
        
        /**
         * MOD - Jeff.Evans
         */
        processRawValue: function(value) {
            return this.removeFormat(value);
        }
    });

Similar Threads

  1. Currency / money field with selectable currency
    By simplessus in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 22 Jan 2011, 3:24 AM
  2. Number Field with currency formatting
    By JSCoder in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 2 Sep 2009, 9:39 AM
  3. Currency Symbol in Ext.ND views
    By cujo13 in forum Ext.nd for Notes/Domino
    Replies: 2
    Last Post: 12 Mar 2009, 6:55 AM
  4. [FIXED] LabelField shows ":" separator symbol
    By Grandiosa in forum Ext GWT: Bugs (1.x)
    Replies: 2
    Last Post: 8 Jun 2008, 8:26 PM

Thread Participants: 22

Tags for this Thread