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

      0  

    Post Number field with currency symbol, thousand separator with international support

    Number field with currency symbol, thousand separator with international support


    Hi, i just created an extension of NumberField that allows you to create number fields with aditional features like:

    Update 16/03/2011

    The text in red are no longer valid.
    No longer need functions to update the format.
    No more $ by default.
    Thousand separator allows any character including blank space (' ').
    Improved getFormattedValue function and other code, now is more clean and short.

    1. Currency Symbol (by default is $), if you don't need a currency symbol just set the config option to null or empty string:
    Code:
    currencySymbol: null
    . To change the currency after the field was created you should use the function setCurrencySymbol.

    No more $ by default, if you need it set up manually by using the config option like before: currencySymbol: $.

    2. Thousand separator, you can use comma (,) or (.) any character. If decimalSeparator is (,) then thousand separator will be (.) when thousandSeparator use default value. By default decimalSeparator is (.) and thousand separator (,). Also you cand hide thousand separator using the config option:
    Code:
    useThousandSeparator: false
    .

    There are also a functions for setDecimalPrecision and setDecimalSeparator.

    3. Display always all the decimals from the given decimal precision value the default value for this config option is:
    Code:
    alwaysDisplayDecimals: false
    .


    4. Config option to set any thousandSeparator:
    Code:
    thousandSeparator:'.'
    .


    If you are changing the properties after the field is created and don't want or you can't use the functions for any reason you must call updateNumberFormat function.

    Here is an screenshot:


    NumericField.jpg


    The first fielset shows a list of fields configured for int values with the different options

    The second fieldset shows a list of fields configured for float values with a decimal precision of 4 and you can notice there are only 3 decimals visibles because only 3 were entered for the values.

    The third fielset shows a list of fields configured for float values with a decimal precision of 4 and you can notice there are 4 decimals but last one is zero (0) they have the same values as the second fieldset and also thousand separator is "blank space"

    Here is the source code: (Actual version) NumericField.zip

    Hope it helps.
    Last edited by brittongr; 16 Mar 2011 at 3:10 AM. Reason: adding new info

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    This stuff is in Ext 4.0.

    Ext.util.Format has number and currency formatting options.

  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 Animal View Post
    This stuff is in Ext 4.0.

    Ext.util.Format has number and currency formatting options.
    I haven't tried yet Ext 4.0, but what a wanted to do it was a class that encapsulate all these features that are very basic, just a few overrides but without to much code because i don't want to lose or get a conflict with the base class in this case (Ext.form.NumberField) so the overrides only remove/add the custom format to the value and then call the superclass functions to let it handle whatever is implemented.

    As far as i saw there is no property currencySymbol or a property to set the format as a config option or the thousandSeparator config option in the class of the documentation of Ext 4.0 but maybe i didn't see well...

    I know with Ext.util.Format you can get that and in fact that is what i'm using inside the class to format the values but the reason that i did the class was because i don't want to add that functionallity manually for every number field that i have in the form.

    But if you can give a hint to archive this without an extra class or extra work, i will be thankfull.
    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 - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It is there and documented in 4.0


  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


    Thank you animal!, i was looking in Ext.for.Number class that's why i didn't found 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.

  6. #6
    Sencha User
    Join Date
    Nov 2009
    Posts
    68
    Vote Rating
    3
    IvanJ is on a distinguished road

      0  

    Default


    I just tried using this in a grideditor and none of the features work

    BTW Animal, saying "this is all in ExtJS 4" doesn't really help anyone dealing with this in ExtJS 3

  7. #7
    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 IvanJ View Post
    I just tried using this in a grideditor and none of the features work

    BTW Animal, saying "this is all in ExtJS 4" doesn't really help anyone dealing with this in ExtJS 3
    Hi, thanks for let me know your issue, the features are really working... i just tried but there is something that i didn't explain at the beginning of this thread... i didn't want to override the getValue function to return the value with the format because that wont be good when you want use it in calculations or send it to the server as number. If i did it so then every time when you need the value you will need to parse the formatted value calling another function.

    When you click to edit, the NumericField automatically get the focus and parse the value to a valid number and then when you leave the editor the getValue function in its parent class (NumberField) is called and that class doesn't have the current format and only returns the value with the format implemented in it. Thats the reason why you are not seing the expected format in the cell.

    In order to display the value with the format inside a grid just use a renderer:

    Code:
    var field = new Ext.ux.NumericField({
            currencySymbol: 'EUR',
            decimalPrecision:5,
            allowDecimals:true,
            alwaysDisplayDecimals: true
        });
        
        // create the Grid
        var grid = new Ext.grid.EditorGridPanel(
        {
            store: store,
            columns: [
            {
                header: 'Price',
                width: 160,
                sortable: true,
                dataIndex: 'price',
                editor: field,
                renderer: function(v){
                    
                    return field.getFormattedValue(v);
                }
            },
    hope the explanation helps you...
    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.

  8. #8
    Sencha User berlamont's Avatar
    Join Date
    Apr 2008
    Location
    Grand Rapids, MI
    Posts
    25
    Vote Rating
    1
    berlamont is on a distinguished road

      0  

    Default thank you

    thank you


    thank you for this, exactly what I need at the moment!

  9. #9
    Sencha User kryo's Avatar
    Join Date
    Jan 2010
    Location
    Costa Rica
    Posts
    34
    Vote Rating
    0
    kryo is on a distinguished road

      0  

    Lightbulb Merge with Ext.locale.Format ?

    Merge with Ext.locale.Format ?


    Hi, you might want to check out:

    http://www.sencha.com/forum/showthre....locale.Format

    I am doing number/currency formatting based on standard locale definitions. It might be an idea to merge these two extensions together into a new locale based text component.
    --
    Hans Doller
    hans@w3forge.org
    Senior Web Developer & Consultant

    Contributed Plugins: Ext.date.RangeField, Ext.money.Exchange, Ext.locale.Format, Ext.ux.Bootstrap

  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 kryo View Post
    Hi, you might want to check out:

    http://www.sencha.com/forum/showthre....locale.Format

    I am doing number/currency formatting based on standard locale definitions. It might be an idea to merge these two extensions together into a new locale based text component.
    yes, i'm going to check it out this weekend
    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.

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