JSFiddle - React, Tailwind, and code Playground

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-neptune/ext-theme-neptune-all.css">

JavaScript

/** undocumented file */
Ext.define('Ceres.view.ux.CellModel', {
    extend: 'Ext.selection.CellModel',

    alias: 'selection.cerescellmodel',

    /**
     * @cfg {Boolean} [rowSelection=true]
     * show the visual rowSelection and fire the events 'rowselectionchanged', 'rowdeselect', 'rowselect'
     */
    rowSelection: true,
    /**
     * @cfg {Boolean} [multiSelection=false]
     * Allow selection over multiple rows
     */
    multiSelection: false,

    checkColumnStateId: 'CHECK_COLUMN',


    /**
     * @cfg {Number/String} [injectCheckbox=0]
     * The index at which to insert the checkbox column.
     * Supported values are a numeric index, and the strings 'first' and 'last'.
     */
    injectCheckbox: 0,

    nextSelection: {},

    constructor: function (cfg) {
        var me = this;
        me.selectedRows = me.selectedRows || new Ext.util.MixedCollection();
        if (cfg.multiSelection || me.multiSelection) {
            cfg.selectionMode = 'MULTI';
        }
        me.callParent([cfg]);
    },

    bindComponent: function (view) {
        var me = this;
        me.callParent(arguments);

        view.on({
            cellmousedown: function (cellModel, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                me.onCellMouseDown.apply(this, [cellModel, td, cellIndex, record, tr, rowIndex, e, view, eOpts]);
            },
            scope: me
        });

        me.grid = me.view.up('grid:not([ownerLockable])');
        if (!me.grid.hasCellModelListeners) {
            //add grid listeners
            if (Ext.isDefined(me.grid)) {
                console.log('adding listeners to', me.grid);
                me.grid.relayEvents(me, ['rowselectionchanged', 'rowdeselect', 'rowselect']);

                me.grid.on('select', function () {
                    console.log('fire select', me.getSelection());
                });
                me.grid.on('rowselectionchanged', function () {
                    console.log('fire...