JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<title>Simple Grid Sample for ExtJs</title>

JavaScript

Ext.Loader.setConfig({
        enabled: true
    });
    Ext.Loader.setPath('Ext.ux', '../ux');

    Ext.require([
        'Ext.selection.CellModel',
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*',
        'Ext.form.*'
//        'Ext.ux.CheckColumn'
    ]);

    Ext.onReady(function () {

        Ext.define('Plant', {
            extend: 'Ext.data.Model',
            fields: [
                {name: 'a', type: 'bool'},
                {name: 'b', type: 'string'}
            ]
        });

        // create the Data Store
        var store = Ext.create('Ext.data.Store', {

            model: 'Plant',
            remoteFilter: false,
            remoteSort: false,
            data: [
                {"id": "1", "name": "foo"},
                {"id": "2", "name": "bar"}
            ]
        });


        var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        });

        // create the grid and specify what field you want
        // to use for the editor at each header.
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            columns: [
                {
                    header: 'String',
                    dataIndex: '1',

                    editor: {
                        allowBlank: false
                    }
                },
                {
                    xtype: 'checkcolumn',
                    header: 'Boolean',
                    dataIndex: '2',

                }
            ],
            selModel: {
                selType: 'cellmodel'
            },
            renderTo: document.body,
            width: 600,
            height: 300,
            frame: true,
            plugins: [cellEditing],
            listeners: {
                beforeedit: function (e) {
                    alert('hi')
                }
            }
        });
    });