[CLOSED] format Numberfield

  1. #1

    [CLOSED] format Numberfield

    Hi, Can I add format for a xtype: numberfield?

    I want to format my field to currency in this example.

    xtype: 'numberfield',
    cls: 'rtl',
    blankText: '0.00',
    decimalPrecision: 2,
    allowNegative: false,
    allowBlank: false,
    allowDecimals: true,
    currencySymbol: '\u0024',
    emptyText: '0.00',
    validateOnBlur: true,
    disabled: true,
    fieldLabel: '<%= ResStr.Expense_SellingRate %>',
    name: 'SellingRate',
    id: 'SellingDailyRate',
    width: 60,
    selectOnFocus: true,
    decimalSeparator: '<%= ViewData["DecimalSeparator"] %>',
    value: Ext.getCmp('fieldManualSelling').getValue() * hoursByDay
    My example dont show $ symbol. Can I add formatNumber function or Mask("0.00$") function?

    This is my complete function

    function initRateForm() {
        rateForm = new Ext.FormPanel({
            id: 'rateForm',
            labelAlign: 'left',
            frame: true,
            header: false,
            bodyStyle: 'padding:5px 5px 0',
            buttonAlign: 'center',
            width: 200,
            labelWidth: 65,
            layout: 'form',
            items: [{
                xtype: 'radiogroup',
                hideLabel: true,
                id: 'group',
                columns: [100, 75],
                items: [{
                    boxLabel: '<%= ResStr.Expense_AutomaticRate %>',
                    name: 'rateType',
                    id: 'AutoRate',
                    inputValue: 'auto',
                    checked: !Ext.getCmp('fieldIsManualRate').getValue()
                },
                {
                    boxLabel: '<%= ResStr.Expense_ManualRate %>',
                    name: 'rateType',
                    id: 'ManuRate',
                    inputValue: 'manu',
                    checked: Ext.getCmp('fieldIsManualRate').getValue(),
                    listeners: {
                        'check': {
                            fn: function() {
                                setRateFieldsVisibility();
                            }
                        }
                    }
                }]
            },
            {
                xtype: 'fieldset',
                title: '<%= ResStr.Expense_HourlyRate %>',
                width: 180,
                id: 'RateTypeFieldset',
                items: [{
                    xtype: 'numberfield',
                    cls: 'rtl',
                    blankText: '0.00',
                    decimalPrecision: 2,
                    allowNegative: false,
                    allowBlank: false,
                    allowDecimals: true,
                    emptyText: '0.00',
                    validateOnBlur: true,
                    disabled: true,
                    fieldLabel: '<%= ResStr.Expense_Hours %>',
                    name: 'Hours',
                    id: 'Hours',
                    width: 60,
                    selectOnFocus: true,
                    decimalSeparator: '<%= ViewData["DecimalSeparator"] %>',
                    value: Ext.getCmp('fieldQuantity').getValue()
                },
                {
                    xtype: 'numberfield',
                    cls: 'rtl',
                    blankText: '0.00',
                    decimalPrecision: 2,
                    allowNegative: false,
                    allowBlank: false,
                    allowDecimals: true,
                    emptyText: '0.00',
                    validateOnBlur: true,
                    fieldLabel: '<%= ResStr.Expense_CostRate %>',
                    name: 'CostRate',
                    id: 'CostRate',
                    width: 60,
                    selectOnFocus: true,
                    decimalSeparator: '<%= ViewData["DecimalSeparator"] %>',
                    value: Ext.getCmp('fieldManualCost').getValue()
                },
                {
                    xtype: 'numberfield',
                    cls: 'rtl',
                    blankText: '0.00',
                    decimalPrecision: 2,
                    allowNegative: false,
                    allowBlank: false,
                    allowDecimals: true,
                    emptyText: '0.00',
                    validateOnBlur: true,
                    fieldLabel: '<%= ResStr.Expense_SellingRate %>',
                    name: 'SellingRate',
                    id: 'SellingRate',
                    width: 60,
                    selectOnFocus: true,
                    decimalSeparator: '<%= ViewData["DecimalSeparator"] %>',
                    value: Ext.getCmp('fieldManualSelling').getValue()
                }]
            },
            {
                xtype: 'fieldset',
                title: '<%= ResStr.Expense_DailyRate %>',
                width: 180,
                id: 'RateTypeFieldset1',
                items: [{
                    xtype: 'numberfield',
                    cls: 'rtl',
                    blankText: '0.00',
                    decimalPrecision: 2,
                    allowNegative: false,
                    allowBlank: false,
                    allowDecimals: true,
                    emptyText: '0.00',
                    validateOnBlur: true,
                    disabled: true,
                    fieldLabel: '<%= ResStr.Expense_Days %>',
                    name: 'Days',
                    id: 'Days',
                    width: 60,
                    selectOnFocus: true,
                    decimalSeparator: '<%= ViewData["DecimalSeparator"] %>',
                    value: Ext.getCmp('fieldDayQuantity').getValue() 
                },
                {
                    xtype: 'numberfield',
                    cls: 'rtl',
                    blankText: '0.00',
                    decimalPrecision: 2,
                    allowNegative: false,
                    allowBlank: false,
                    allowDecimals: true,
                    emptyText: '0.00',
                    validateOnBlur: true,
                    disabled: true,
                    fieldLabel: '<%= ResStr.Expense_CostRate %>',
                    name: 'CostRate',
                    id: 'CostDailyRate',
                    width: 60,
                    selectOnFocus: true,
                    decimalSeparator: '<%= ViewData["DecimalSeparator"] %>',
                    value: Ext.getCmp('fieldManualCost').getValue() * hoursByDay
                },
                {
                    xtype: 'numberfield',
                    cls: 'rtl',
                    blankText: '0.00',
                    decimalPrecision: 2,
                    allowNegative: false,
                    allowBlank: false,
                    allowDecimals: true,
                    currencySymbol: '\u0024',
                    emptyText: '0.00',
                    validateOnBlur: true,
                    disabled: true,
                    fieldLabel: '<%= ResStr.Expense_SellingRate %>',
                    name: 'SellingRate',
                    id: 'SellingDailyRate',
                    width: 60,
                    selectOnFocus: true,
                    decimalSeparator: '<%= ViewData["DecimalSeparator"] %>',
                    value: Ext.getCmp('fieldManualSelling').getValue() * hoursByDay
                }]
            }]
        });
    }
    Thanks.
    Last edited by geoffrey.mcgill; Jul 15, 2010 at 7:30 PM. Reason: code formatting
  2. #2
    Hi,

    NumberField doesn't support formating. Use TextField (formating will be applied on blur)
    <ext:TextField ID="TextField1" runat="server" MaskRe="/[0-9\-\,\.]/">
                <Listeners>
                    <Change Handler="this.setValue(Ext.util.Format.number(newValue.replace(/[\$]/g, ''), '$0.00'));" />
                </Listeners>
            </ext:TextField>
  3. #3
    Hi,

    Can you apply your example in my sample? I dont know where apply Listeners in my javascript FormPanel.

    Thanks.

    function initRateForm() { 
        rateForm = new Ext.FormPanel({ 
    ...
    xtype: 'textfield', 
    cls: 'rtl', 
    emptyText: '0.00', 
    validateOnBlur: true, 
    disabled: true, 
    fieldLabel: '<%= ResStr.Expense_SellingRate %>', 
    name: 'SellingRate', 
    id: 'SellingDailyRate', 
    width: 60, 
    selectOnFocus: true, 
    decimalSeparator: '<%= ViewData["DecimalSeparator"] %>', 
    value: Ext.getCmp('fieldManualSelling').getValue() * hoursByDay
  4. #4
    Hi,

    Add the following code to the config of the textfield
    maskRe: /[0-9\-\,\.]/,
            listeners: {
                change: {
                    fn: function (el, newValue, oldValue) {
                        this.setValue(Ext.util.Format.number(newValue.replace(/[\$]/g, ''), '$0.00'));
                    }
                }
            }
  5. #5
    Hi,

    This code work if I change text in field but if my fields is disabled or if I just want view data, currency value is not show.

    I have try following but is dosent work. I suspect parameters newValue and oldValue. Where I can find good paramaters for afterrender function?

     
    maskRe: /[0-9\-\,\.]/, 
            listeners: { 
                afterrender: { 
                    fn: function (el, newValue, oldValue) { 
                        this.setValue(Ext.util.Format.number(newValue.replace(/[\$]/g, ''), '$0.00')); 
                    } 
                } 
            }
    Thanks.
  6. #6
    Hi,

    In the afterrender event please use
    afterrender: { 
       fn: function (el) { 
             this.setValue(Ext.util.Format.number(this.getValue().replace(/[\$]/g, ''), '$0.00')); 
       } 
    }
  7. #7
    Hi, this is work but if I save my data, the value is changed with $ value.

    Can I set only Mask and not data for currency value?

    Thank.
  8. #8
    Hi,

    Unfortunately no
    You have to exclude $ on the server side or create hidden field and write value to that hidden field in the change event of the text field

Similar Threads

  1. [CLOSED] NumberField Format
    By majestic in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 06, 2010, 8:57 AM
  2. [CLOSED] NumberField Format
    By majestic in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 17, 2010, 7:53 AM
  3. [CLOSED] How to give format to a NumberField control value?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 27, 2010, 3:03 PM
  4. [CLOSED] [1.0] NumberField Format
    By turione in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 08, 2009, 7:11 AM
  5. [CLOSED] NumberField Mask Format
    By idrissb in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 21, 2009, 1:26 PM

Tags for this Thread

Posting Permissions