JSFiddle - React, Tailwind, and code Playground

by molecule

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-3.3.1/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-3.3.1/adapter/ext/ext-base.js"></script>
<script src="http://dev.sencha.com/deploy/ext-3.3.1/ext-all-debug.js"></script>

JavaScript

var myData = [
    ['J', 'MD'],
    ['A', 'VA'],
    ['S', 'DC'],
    ['M', 'DE'],
    ['B', 'NJ'],
    ['N', 'CA'],
    ['S', 'RT'],
    ['S', 'CG']
    ];
var myDirectfn = function(opts, fn, proxy) {
    console.log(opts, fn, proxy);
    var start = opts.start,
        end = opts.page * opts.limit,
        data = [];
    if (end > myData.length) end = myData.length;
    for (var i = start; i < end; i++)
        data.push(myData[i]);
//    data.total = myData.length;
    fn(0, {
        status: true,
        result: data
    });
};
myDirectfn.directCfg = {
    method: {}
};

var store = new Ext.data.ArrayStore({
    //totalProperty : 8,
    //pageSize: 4,
    proxy: new Ext.data.DirectProxy({
        directFn: myDirectfn
    }),
    fields: [{
        name: 'fullName'},
    {
        name: 'state'}]
});


store.loadData(myData);
var grid = new Ext.grid.GridPanel({
    store: store,
    columns: [{
        id: 'fullName',
        header: "FullName",
        width: 160,
        sortable: true,
        dataIndex: 'fullName'},
    {
        header: "State",
        width: 75,
        sortable: true,
        dataIndex: 'state'}],
    stripeRows: true,
    autoExpandColumn: 'fullName',
    height: 350,
    width: 600,
    title: 'Array Grid',
    bbar: new Ext.PagingToolbar({
        store: store,
        pageSize: 4,
        displayInfo: true
    }),
    viewConfig: {
        forceFit: true
    }
});
store.load();
grid.render(Ext.getBody());