JSFiddle - React, Tailwind, and code Playground

by molecule

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">

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) {
    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.Store({
    //totalProperty : 8,
    pageSize: 4,
    proxy: {
        type: 'direct',
        directFn: myDirectfn,
        reader: {
            type: 'array'
        }
    },
    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());