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();
            }
        });


3 comments :

  1. Just what the doctor ordered :)

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

    ReplyDelete
  3. The share your really gives us excitement. Thanks for your sharing. If you feel tired at work or study try to participate in our games to bring the most exciting feeling. Thank you!
    hotmail sign in | red ball | 192.168.1.1

    ReplyDelete