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 getRandomData = function() {
    res = [];
    for (var i = 0; i < 10; i++)
    res.push({
        'name': 'name ' + Math.round(Math.random() * 1000),
        'email': 'email' + Math.round(Math.random() * 1000),
        'phone': 'phone' + Math.round(Math.random() * 1000)
    });
    return {
        items: res
    };
};
store1 = new Ext.data.Store({
    fields: ['name', 'email', 'phone'],
    proxy: {
        type: 'ajax',
        url: '/echo/json/',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});
store2 = new Ext.data.Store({
    fields: ['name', 'email', 'phone'],
    proxy: {
        type: 'ajax',
        url: '/echo/json/',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

store1.proxy.actionMethods['read'] = 'POST';
store2.proxy.actionMethods['read'] = 'POST';
store1.load({
    params: {
        json: Ext.JSON.encode(getRandomData()),
        delay: 0.3
    }
});
store2.load({
    params: {
        json: Ext.JSON.encode(getRandomData()),
        delay: 0.3
    }
});

Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    id: 'mytabpanel',
    renderTo: document.body,
    items: [{
        title: 'Foo',
        xtype: 'grid',
        store: store1,
        columns: [
            {
            header: 'Name',
            dataIndex: 'name'},
        {
            header: 'Email',
            dataIndex: 'email',
            flex: 1},
        {
            header: 'Phone',
            dataIndex: 'phone'}
        ],
        },
    {
        title: 'Bar',
        tabConfig: {
            title: 'Custom Title',
            tooltip: 'A button tooltip'
        },
        xtype: 'grid',
        store: store2,
        columns: [
            {
            header: 'Name',
            dataIndex: 'name'},
        {
            header: 'Email',
            dataIndex: 'email',
            flex: 1},
        {
            header: 'Phone',
            dataIndex: 'phone'}
       ...