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


5 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
  4. Good day! Would you mind if I share your blog with my myspace group?
    There’s a lot of folks that I think would really
    appreciate your content. Please let me know. Many thanks

    Jaket Parka | Grosir Jaket Parka | Grosir Jaket Parka | Grosir Jaket Parka

    ReplyDelete
  5. Good one you have shared here.. and its really helpful one for me. The last week i have planned to buy custom essays online about the same topic. And good grade for my academic career too..

    ReplyDelete