JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dev.sencha.com/extjs/5.0.0/ext-all-debug.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/extjs/5.0.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css">
<div id="grid-Spec"></div>

JavaScript

Ext.onReady(function() {
    // this is here just to fake some data
    Ext.define('Ext.ux.data.reader.Json', {
        alias: 'reader.uxjson',
        extend: 'Ext.data.reader.Json',
        getResponseData: function(response) {
            return {"rows":[{"field1":1000*Math.random()},{"field1":1000*Math.random()},{"field1":1000*Math.random()},{"field1":1000*Math.random()},{"field1":1000*Math.random()}],"totalCount":15};
        }
    })
    
    var gridStore = Ext.create('Ext.data.JsonStore', {
         autoLoad: false,
         fields: [
             {name: 'field1', type: 'int'},
             {name: 'field2', type: 'int'}
         ],
         pageSize: 5,
         proxy: {
             type: 'ajax', 
             url: '/echo/json',
             reader: {
                 type: 'uxjson',
                 rootProperty: 'rows',
                totalProperty: 'totalCount'
             }
         }
    });

    
    grid = Ext.create('Ext.grid.Panel', {
        renderTo: 'grid-Spec',
        store: gridStore,
        columns: [
            {text: 'Field 1', width: 100, sortable: true, dataIndex: 'field1'},
            {text: 'Field 2', width: 100, sortable: true, dataIndex: 'field2'}
        ],
        height: 200,
        width: 500,
        selModel: { mode: 'SINGLE' },
        dockedItems: [{
            xtype: 'pagingtoolbar',
            store: gridStore,
            dock: 'bottom',
            displayInfo: true
        }]
    });
    
    gridStore.load({
         params: {
             start: 0,
             limit: 5
         }
    });
    
});