My Love for ExtJs

I love ExtJs. It is truly a butt kicking framework.

So, yes ExtJs is one of the frameworks I use on a daily basis. ExtJs is a pretty well sized framework to build Enterprise Applications or as a matter of fact just about any application. Learning curve is steep but rewards are enormous.

Assuming you are somewhat familiar with the framework. If not, then I suggest you jump right in by reading up amazing docs @ Sencha.

What my clients asked...

Just recently a client asked to retain a precision for ExtJs's number field. Requirement goes to say, if a user types 2 then the field should display 2.00. Granted the field is configured for a decimal precision of 2.

By default the number field or as a matter of fact Javascript does not retain the precision like that. Sure enough, if you typed 2.12 then it will retain 2.12 but if you type 2.00 it gets converted to 2. We want the exact opposite of that.

Don't believe me then open up a Developer Console in your browser and type in the statements below. See what happens.

parseFloat("2.00"); // gets converted to 2
parseFloat("2"); // gets converted to 2

Our requirement goes to say: if you typed 2.00 then the field should retain 2.00 and not convert it to 2.

A very Peculiar requirement and not everyone will ask for it. But, I thought to share it anyways. Just-in-case it might help a loner like me :)

Remember ExtJs Number Field is actually a text field. And therefore it requires to use parseFloat to convert a decimal string into a float. Mouthful huh!

And here is the solution...

Solution is quite simple but requires to extend the Number field class from ExtJS framework and override valueToRaw function. In the code example below, valueToRaw is taken straight from the framework except the very last line with a return statement.

Pay attention the return statement. This is where the magic happens.

With forcePrecision: true, the function will apply the precision using Ext.Number.toFixed(value, precision) and return the number as is.

With forcePrecision: false the function will apply the precision but wrap the return value in a parseFloat to achieve the default behavior.

Let's look at the code.

Ext.define('MyApp.view.component.Number', {
    override: 'Ext.form.field.Number',
    forcePrecision: false,

    // changing behavior of valueToRaw with forcePrecision
    valueToRaw: function (value) {
        var me = this,
            decimalSeparator = me.decimalSeparator;

        value = me.parseValue(value); // parses value received from the field
        value = me.fixPrecision(value); // applies precision
        value = Ext.isNumber(value) ? value : 
                parseFloat(String(value).replace(decimalSeparator, '.')); 
        value = isNaN(value) ? '' : String(value).replace('.', decimalSeparator);

        // forcePrecision: true - retains a precision
        // forcePrecision: false - does not retain precision for whole numbers
        return me.forcePrecision ? Ext.Number.toFixed(
                                            parseFloat(value), 
                                            me.decimalPrecision) 
                                    : 
                                    parseFloat(
                                            Ext.Number.toFixed(
                                                parseFloat(value), 
                                                me.decimalPrecision
                                            )
                                    );
    }
});

And here goes the definition of our number field.

{
    xtype : 'numberfield',
    fieldLabel: 'Custom Number Field',
    minValue: 0.10,
    maxValue: 2.00,
    step: 0.01,
    allowBlank: false,
    allowDecimals: true,
    decimalPrecision: 2,
    forcePrecision: true
}

Snippet above says, to create a number field with precision of 2. Increase field value by 0.01. Minimum value must be 0.10 and maximum allowed value must be 2.00.

Now take it for a spin!

And to test...here is the fiddle. Click Run Code. Which should show you a form with a number field. Enter 2 and tab off. To your surprise you will notice that code will apply a precision of two by converting 2 to 2.00. Exactly what my clients asked for!

Again, not something that everyone will come looking for, but hopefully it will help someone who is in dire need for this override.

Here is the git repo: ExtHelpers

Fork & Enjoy !

Happy Ext-ing!