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
    363
    Vote Rating
    5
    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
    Nov 2011
    Posts
    4
    Vote Rating
    0
    Leila is on a distinguished road

      0  

    Default


    Thanks for the extension! I found it to be extremely helpful to me. I am in the process of developing a payroll processing utility and this extension is exactly what I needed to perform these types of functions. You did a great job coding this, it performs flawlessly!

  8. #8
    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 Leila View Post
    Thanks for the extension! Very helpful.
    Glad to know that.
    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.

  9. #9
    Touch Premium Member
    Join Date
    Oct 2011
    Posts
    5
    Vote Rating
    0
    Jeff.Evans is on a distinguished road

      0  

    Default


    OK, I think I figured out a way to get this to submit the "raw" (i.e. unformatted, numeric-only) value. And I think you were on the right track with processRawValue, brittongr. At least it appears to be working for me. Changes to the source (just the one function override) from the zip file are shown below in bold:

    Code:
        onFocus: function(){
            this.setRawValue(this.removeFormat(this.getRawValue()));
            
            this.callParent(arguments);
        },
        processRawValue: function(value) {
            return this.removeFormat(value);
        }
    I haven't tested extensively (i.e. if there are implications to overriding this beyond simply what we're trying to achieve). But at least for me, this makes the NumericField fully usable for our ExtJS 4.x application. Thanks for taking the initiative on creating something that should have really been given out-of-the-box.

  10. #10
    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 Leila View Post
    Thanks for the extension! I found it to be extremely helpful to me. I am in the process of developing a payroll processing utility and this extension is exactly what I needed to perform these types of functions. You did a great job coding this, it performs flawlessly!
    Thanks, very nice...
    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.