How to use numeric fields with a Sencha ExtJS grid and model

The following source code shows a few examples of how to use numeric fields with Sencha ExtJS. First, here are some field definitions from a Ext.grid.Panel class:

{
    text: 'Qty',
    width: 100,
    dataIndex: 'quantity',
    xtype: 'numbercolumn',
    format: '0,000',
    align: 'right'
},
{
    text: 'Price',
    width: 100,
    dataIndex: 'price',
    xtype: 'numbercolumn',
    format: '0.00',
    align: 'right'
},

It will probably help to see the code for the entire class, so here it is:

Ext.define('Finance.view.TransactionList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.transactionList',

    frame: true,
    store: Ext.create('Finance.store.Transactions'),

    columns: [
        {
            text: 'ID',
            width: 50,
            dataIndex: 'id'
        },
        {
            text: 'Symbol',
            width: 100,
            dataIndex: 'symbol'
        },
        {
            text: 'Type',
            width: 50,
            dataIndex: 'ttype'
        },
        {
            text: 'Qty',
            width: 100,
            dataIndex: 'quantity',
            xtype: 'numbercolumn',
            format: '0,000',
            align: 'right'
        },
        {
            text: 'Price',
            width: 100,
            dataIndex: 'price',
            xtype: 'numbercolumn',
            format: '0.00',
            align: 'right'
        },
        {
            text: 'Date',
            width: 150,
            dataIndex: 'datetime',
            xtype: 'datecolumn',
            format: 'Y-m-d'
        },
        {
            text: 'Notes',
            width: 250,
            dataIndex: 'notes'
        }
    ],

    dockedItems: [
        {
            xtype: 'toolbar',
            flex: 1,
            dock: 'top',
            items: [
                {
                    // the controller automagically picks up the button click event
                    // by referencing the '#add' class (or possibly the 'add' itemId)
                    xtype: 'button',
                    text: 'Add',
                    itemId: 'add',
                    iconCls: 'add'
                },
                {
                    xtype: 'button',
                    text: 'Delete',
                    itemId: 'delete',
                    iconCls: 'delete'
                }
            ]
        }
    ]

});

The Model

The Sencha ExtJS model class that goes along with that code is shown here:

Ext.define('Finance.model.Transaction', {
    extend: 'Ext.data.Model',

    idProperty: 'id',

    // `ttype` is B (buy) or S (sell)
    fields: [
        { name: 'id',       type: 'int' },
        { name: 'symbol',   type: 'string' },
        { name: 'ttype',    type: 'string' },
        { name: 'quantity', type: 'int' },
        { name: 'price',    type: 'float' },                  // can also use 'number'
        { name: 'datetime', type: "date", format: 'Y-m-d' },
        { name: 'notes',    type: 'string'  }
    ]

});

That code shows both integer and float fields. Sencha lets you use int or integer to declare integer fields, and float or number to declare floating-point (float, decimal) fields.

That’s all I have for today, I just wanted to share this code, mostly as a reference for myself.