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-classic/ext-theme-classic-all.css">

CSS

.c-locked-gridview .x-grid-view {
    overflow: visible !important;
}
.c-locked-gridview .x-panel-body {
    overflow: auto !important;
}

JavaScript

var store = Ext.create('Ext.data.Store', {
    fields: ['name', 'email', 'phone'],
    data: {
        'items': [{
            "name": "Lisa",
                "email": "[email protected]",
                "phone": "555-111-1224"
        }, {
            "name": "Bart",
                "email": "[email protected]",
                "phone": "555-222-1234"
        }, {
            "name": "Homer",
                "email": "[email protected]",
                "phone": "555-222-1244"
        }, {
            "name": "Marge",
                "email": "[email protected]",
                "phone": "555-222-1254"
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    width: 400,
    lockedGridConfig: {
        width: 200,
        cls: 'c-locked-gridview'
    },
    injectLockable: function () {
        var me = this;
        Ext.grid.locking.Lockable.prototype.injectLockable.apply(this, arguments);
        me.lockedGrid.setWidth(200);
        me.lockedGrid.view.on('afterrender', function () {
            console.log('bam', me.lockedGrid.view);
            debugger;
            var els = Ext.dom.Query.select('.c-locked-gridview .x-panel-body', me.lockedGrid.el);

            if (els.length > 0) {
                Ext.get(els[0]).on('scroll', function () {
                    console.log('scroll!', arugments);
                });
            }
        });


    },
    syncLockedWidth: function () {},
    scroll: true,
    renderTo: Ext.getBody(),
    columns: [{
        header: 'Name',
        dataIndex: 'name',
        locked: true
    }, {
        header: 'Phone',
        dataIndex: 'phone',
        locked: true
    }, {
        header: 'Name',
        dataIndex: 'name',
        locked: true
    }, {
        header: 'Phone',
        dataIndex: 'phone',
        locked: true
    }, {
        header: 'Name',
       ...