Blog Archive

ExtJs 4 set Decimal precision using custom number field

In this example we are trying to force Decimal precision to 2 positions. To achieve that we extend the Ext.form.NumberField to define a custom NumberField and override the following 2 methods
  • setValue
  • onSpinUp



Source for MyNumberField.js

Ext.define('SA.view.MyNumberField', {
    extend: 'Ext.form.NumberField',
    alias : 'widget.mynumberfield',
    initComponent: function() {
        this.callParent(arguments);
    },
    setValue : function(v){
        v = typeof v == 'number' ? v : String(v).replace(this.decimalSeparator, ".");
        v = isNaN(v) ? '' : String(v).replace(".", this.decimalSeparator);
        v = isNaN(v) ? '' : this.fixPrecision(String(v).replace(".", this.decimalSeparator));
        return Ext.form.NumberField.superclass.setRawValue.call(this, v);
        }, 
    onSpinUp: function() {
            var me = this;
            if (!me.readOnly) {
                var val = parseFloat(me.step); 
                if(me.getValue() !== '') {
                    val = parseFloat(me.getValue()); 
                    me.setValue((val + parseFloat(me.step)));
                }   
            }   
        },
    fixPrecision : function(value){
           
            var nan = isNaN(value);
            if(!this.allowDecimals || this.decimalPrecision == -1 || nan || !value){
               return nan ? '' : value;
            }
            return parseFloat(value).toFixed(this.decimalPrecision);
        }
    }); 

Tip: If you would like to format the numberfield in some other way , then just modify the fixPrecision function. The setValue function is just checking for a valid numeric value and then calling the fixPrecision function which returns the formatted value.

Source for index.html

<html>
<head>
    <title>Force Decimal Input in Forms</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>

</head>
<body></body>
</html>

Source for app.js

Ext.Loader.setConfig({ 
    enabled: true
    });

Ext.application({
    name: 'SA',

    appFolder: 'app',
   
    controllers: [
                  'Samples'
              ],

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'anchor',
            items: [
                {
                    xtype: 'myform',
                    anchor: '50% 20%'
                }
            ]
        });
    }
});

Source for Edit.js

Ext.define('SA.view.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.itemedit',

    title : 'Edit Information',
    layout: 'fit',
    autoShow: true,

    initComponent: function() {
        this.items = this.buildItems();
        this.buttons = this.buildButtons();
        this.callParent(arguments);
    },
    buildItems: function(){
        return [
                {
                    xtype: 'form',
                    items: [
                        {
                            xtype: 'displayfield',
                            itemId: 'itemNumber',
                            fieldLabel: 'Item Number'
                        },
                        {
                            xtype: 'mynumberfield',
                            itemId: 'weight',
                            name : 'weight',
                            fieldLabel: 'Weight',
                            decimalPrecision:2,
                            step:0.01
                         }
                    ]
                }
            ];
    },
    buildButtons: function(){
        return [
                {
                    text: 'Save',
                    action: 'save'
                },
                {
                    text: 'Cancel',
                    scope: this,
                    handler: this.close
                }];
    }
   
});

Source for Display.js

Ext.define('SA.view.Display' ,{
    extend: 'Ext.panel.Panel',
    alias : 'widget.myform',
    title: 'Force Decimal Input',
    items: [
            {
                xtype: 'displayfield',
                value: 'ABC',
                itemId: 'itemNumber',
                fieldLabel: 'Item Number'
            },
            {
                xtype: 'displayfield',
                value: 11.00,
                itemId: 'weight',
                fieldLabel: 'Weight'
            } 
            ],
    buttons: [{
        text: 'Edit',
        action: 'edit'
    }]
});

Source for Samples.js

Ext.define('SA.controller.Samples', {
            extend : 'Ext.app.Controller',

            views : ['Display','Edit','MyNumberField'],
            refs: [{
                ref: 'myDisplayForm', 
                selector: 'myform'
            }], 
           
            init : function() {
                this.control({
                            'viewport > panel' : {
                                render : this.onPanelRendered
                            },
                            'myform button[action=edit]' : {
                                click : this.editItem
                            },
                            'itemedit button[action=save]' : {
                                click : this.updateItem
                            }
                        });
            },

            onPanelRendered : function() {
                console.log('The panel was rendered');
            },

            editItem : function(button) {
                console.log('Edit button was clicked');
               
                var panel = button.up('panel');
                itemNumber = panel.getComponent('itemNumber').getValue();
                weight = panel.getComponent('weight').getValue();
                console.log(itemNumber);
                console.log(weight);
               
                var myWindow = Ext.widget('itemedit');
                var editpanel = myWindow.down('form');
                editpanel.getComponent('itemNumber').setValue(itemNumber);
                editpanel.getComponent('weight').setValue(weight);
            },

            updateItem : function(button) {
                var win = button.up('window');
                form = win.down('form');
                var panel = this.getMyDisplayForm();
                panel.getComponent('weight').setValue(form.getComponent('weight').getValue());
                win.close();
            }
        });


2 comments :

  1. Just what the doctor ordered :)

    ReplyDelete
  2. Looks strangely similar to the ExtJS 5.1 source, but this came out first...

    ReplyDelete