Hybrid View

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

      2  

    Default Number Field with currency symbol, thousand separator & international support ExtJS4

    Number Field with currency symbol, thousand separator & international support ExtJS4


    I wrote a previous version of this extension for extjs 3, basically is the same code, just adapted to work with current version 4.

    The extension extends from Ext.form.field.Number and add these properties:

    Code:
    currencySymbol: null,
    useThousandSeparator: true,
    thousandSeparator: ',',
    alwaysDisplayDecimals: false,
    fieldStyle: 'text-align: right;',
    Features:
    1. Display a given currency symbol, default value is null.
    2. Display a thousand separator, this can be any character including blank space (' ') default value is ",".
    3. Force decimal precision to display all decimals from "decimalPrecision" property.

    Notes:

    If you set thousandSeparator config option to "." automatically decimalSeparator will be set to "," unless you also set decimalSeparator explicitly.
    I didn't remove the trigger so you can still click up and down to increase or decrease the value. It will be nice to know the opinions of this one.

    I tried to use Ext.util.Format but it doesn't allow to apply all the options the extension provide, so i still use my own function to format the value. One property that is missing from the extension is "currencyAtEnd" requested before, i couldn't add it today.
    Full size image of combinations can be found inside the zip file.

    For those just use USD currency formatting can take a look to this extension.

    Previous version for extjs3 could be found here.
    Attached Images
    Attached Files
    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. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    6
    Vote Rating
    0
    lhidalgo is on a distinguished road

      0  

    Default



    Thank you very much for this extension. I'll try this very soon

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

      0  

    Default


    Quote Originally Posted by lhidalgo View Post

    Thank you very much for this extension. I'll try this very soon
    Great! Let me know if you found any issue.
    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. #4
    Sencha User
    Join Date
    Feb 2010
    Posts
    356
    Vote Rating
    4
    maneljn is on a distinguished road

      0  

    Default


    i have a problem with this extension.
    When i submit the numeric value the post is with format, currency char, etc... i need to submit just numbers and decimal symbol. ?¿

    this value 1,500.20 €
    i want to submit this: 1500.20

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

      0  

    Default


    Thanks,

    Let me see if i can fix that adding processRawValue function.
    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.

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

      0  

    Default


    sorry, no luck...

    The issue is the same as this http://www.sencha.com/forum/showthre...l=1#post582429 and one workaround you can try is assign the values to a local variable before submit and then read the value from the field using field.getValue().

    Code:
    var params = formPanel.getForm().getFieldValues(false);
    params.Amount = field.getValue();
    But you need to use an empty form...
    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.

  7. #7
    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

  8. #8
    Sencha User
    Join Date
    Apr 2014
    Posts
    3
    Vote Rating
    0
    mkkguru is on a distinguished road

      0  

    Default


    Can you please let me know how to validate below type of validations in functions. var reqDependency20_1=((Ext.getCmp('i_7_2158_id') != undefined)?((((Ext.getCmp('i_7_559_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_1846_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_577_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_2158_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_2295_id').getInputValueCT()+'') == '')) ? true : (((Ext.getCmp('i_7_565_id').getInputValueCT()+'') != '') ? true (Ext.getCmp('i_80_1068_id').getInputValueCT()+'') == 'Audited')?true(Ext.getCmp('i_7_559_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_565_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_1846_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_2158_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_2295_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_577_id').getInputValueCT()+'') == '')))))((Ext.getCmp('i_7_559_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_1846_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_577_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_2295_id').getInputValueCT()+'') == '')) ? true : (((Ext.getCmp('i_7_565_id').getInputValueCT()+'') != '')? true (Ext.getCmp('i_80_1068_id').getInputValueCT()+'') == 'Audited')?true(Ext.getCmp('i_7_559_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_565_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_1846_id').getInputValueCT()+'') == '')&&((Ext.getCmp('i_7_2295_id').getInputValueCT()+'') == '')&& ((Ext.getCmp('i_7_577_id').getInputValueCT()+'') == '')))))); Thanks in advance

  9. #9
    Touch Premium Member
    Join Date
    Mar 2011
    Posts
    122
    Vote Rating
    7
    chamacs is on a distinguished road

      0  

    Default


    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 'Community Discussion' (http://www.sencha.com/forum/showthre...38#post1064138) 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);
        }
    });