JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext/gpl/4.2.0/resources/css/ext-all-neptune.css">

JavaScript

var store = Ext.create('Ext.data.Store', {
    proxy: {
        type: 'memory'
    },
    fields: [
        {
            name: 'a',
            type: 'int'
        },
        {
            name: 'b',
            type: 'int'
        },
        {
            name: 'c',
            type: 'int'
        }
    ],
    data: [
        {
            'a': 10,
            'b': 30
        },
        {
            'a': 26,
            'b': 13
        }
    ]
});

Ext.widget({
    xtype: 'grid',
    renderTo: Ext.getBody(),
    plugins: [
        {
            ptype: 'cellediting',
            clicksToEdit: 1
        }
    ],
    store: store,
    columns: [
        {
            dataIndex: 'a',
            text: 'A',
            editor: 'numberfield'
        },
        {
            dataIndex: 'b',
            text: 'B',
            editor: 'numberfield'
        },
        {
            dataIndex: 'c',
            text: 'C',
            renderer: function (v, m, record) {
                var a = record.get('a'),
                    b = record.get('b');
                
                return a + b;
            }
        }
    ]
});