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