1. #1
    Sencha User realjax's Avatar
    Join Date
    Aug 2009
    Location
    Netherlands
    Posts
    412
    Vote Rating
    6
    realjax is on a distinguished road

      0  

    Default Form field currency plugin

    Form field currency plugin


    Hi,

    I couldn't find something like this so wrote it myself.
    This currency plugin plugs in to a xtype: 'textfield' like so:


    Code:
    {
        xtype: 'textfield',
        width: 100,
        fieldLabel: 'Currency demo',
        plugins: 'currency',
        name: 'demo',
        currencyConfig: {
            symbolBeforeAmount: true,
            currencySymbol: '\u20AC', //  = euro sign in unicode
            decimalSeparator: ',',
            thousandsSeparator: '.',
            negativeAmountClass: 'negativeAmount',
            invalidAmountText: 'Not a valid amount.'
        }
    }
    It kinda speaks for itself I guess.. Here's a screenprint of what the demo (included in zip) looks like if your run it.
    currency600.jpg
    The plugin creates a copy of the textfield with the same name (removes name property from original) so when you submit a currency field, the value is always sent as a float (submit decimal separator is a dot)

    Two things to remember:
    - the plugin only works on a Ext.form.TextField !
    - use unique names for your textfields.

    Update: Current version respects values set with the setValue() method. In other words, should work fine when (pre)loading a form with existing values from a backend for instance.


    Attached Files
    Last edited by realjax; 9 Aug 2010 at 4:27 AM. Reason: New version.

  2. #2
    Sencha User
    Join Date
    Jan 2010
    Posts
    50
    Vote Rating
    0
    Allbus is on a distinguished road

      0  

    Default


    Hi,

    your plugin works very well!
    By the way, why are you cleaning the thousand separators? Removing and re-adding commas make the text shift and may not be good for the user experience.

  3. #3
    Sencha User
    Join Date
    Jan 2010
    Posts
    50
    Vote Rating
    0
    Allbus is on a distinguished road

      0  

    Default


    I also think you should create a sequence on setValue() with updateShown(), or if I populate a form with setValues, the field is not formatted.

    Then, you need to replace setValue() with setRawValue() in the plugin, and call updateHidden() after.

  4. #4
    Sencha User
    Join Date
    Jan 2010
    Posts
    50
    Vote Rating
    0
    Allbus is on a distinguished road

      0  

    Default


    And probably would be a good idea to overwrite getValue(), making it to read from hiddenValue

  5. #5
    Sencha User realjax's Avatar
    Join Date
    Aug 2009
    Location
    Netherlands
    Posts
    412
    Vote Rating
    6
    realjax is on a distinguished road

      0  

    Default


    True I need to make a few adjustments for when populating a form. Will do that in a day or two :-)

  6. #6
    Sencha User realjax's Avatar
    Join Date
    Aug 2009
    Location
    Netherlands
    Posts
    412
    Vote Rating
    6
    realjax is on a distinguished road

      0  

    Default


    Quote Originally Posted by Allbus View Post
    And probably would be a good idea to overwrite getValue(), making it to read from hiddenValue
    New version available. No need to overwrite getValue() since you are already getting the right value when you call this method.

  7. #7
    Sencha User
    Join Date
    Jan 2010
    Posts
    50
    Vote Rating
    0
    Allbus is on a distinguished road

      0  

    Default


    Executing your demo (reading from the second field):

    Ext.getCmp('ext-comp-1451').getValue()
    "12,000.00 $"

    I expected to get "12000.00"

    There are also problems if you use reversed separators and you call setValue().
    For example (setting the first field),
    Code:
    Ext.getCmp('ext-comp-1448').setValue('100.00')
    set "E 10.000,00" in the field.

    I prefer to have field like jsakalos: you always set the value in a format and you always get it back in that format (see xdatefield, xtimefield, ...). I think it's much easier!

  8. #8
    Sencha User realjax's Avatar
    Join Date
    Aug 2009
    Location
    Netherlands
    Posts
    412
    Vote Rating
    6
    realjax is on a distinguished road

      0  

    Default


    I'll fix things later for those of you who can't live without Ext.getCmp()
    In the mean time, just get the fields from your form
    Code:
    ...getForm().getValues()
    or read in the field by NAME
    Code:
    ...getForm().findField('demo2')
    Should work fine

  9. #9
    Sencha User
    Join Date
    Jan 2010
    Posts
    50
    Vote Rating
    0
    Allbus is on a distinguished road

      0  

    Default


    Yes, I know that reading from form you get the unformatted value.

    I used getCmp() because I also need to do some calculations in the form. I need to get the value for something else in the form.
    I'm getting the field by name. But findField() has the same result of getCmp() - they both return the field - so field.getValue() will return the formatted value.

    The point is that form.getValues() doesn't call getValue() on each field.

    Probably is more wrong to override getValue(), probably would be better to have getUnformattedValue()

  10. #10
    Sencha User
    Join Date
    Jan 2010
    Posts
    50
    Vote Rating
    0
    Allbus is on a distinguished road

      0  

    Default


    And what do you think about having a single "server format" to populate the field?

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. Personnal composite for currency field
    By Kirua007 in forum Ext GWT: Discussion
    Replies: 1
    Last Post: 23 Apr 2010, 4:34 AM
  3. [EXTJS 3.0.0] Currency Field Component : Setting value via Javascript
    By JSCoder in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 8 Jan 2010, 1:39 AM
  4. Number Field with currency formatting
    By JSCoder in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 2 Sep 2009, 9:39 AM
  5. How to format numeric field in form as US currency
    By dlbjr in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 12 Feb 2008, 12:05 PM

Thread Participants: 9