JSFiddle - React, Tailwind, and code Playground

by marcusschiesser

HTML

<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">

JavaScript

Ext.onReady(function () {
    var json1 = [{
        "name": "Sylvester",
            "surname": "Stallone"
    }, {
        "name": "Dolph",
            "surname": "Lundgren"
    }, {
        "name": "Arnold",
            "surname": "Schwarzenegger"
    }, {
        "name": "Mel",
            "surname": "Gibson"
    }, {
        "name": "Harrison",
            "surname": "Ford"
    }];

    var json2 = [{
        "chinese": "我",
            "english": "I",
            "german": "Ich",
            "french": "Je"
    }, {
        "chinese": "你",
            "english": "You",
            "german": "Du",
            "french": "Tu"
    }, {
        "chinese": "他",
            "english": "He",
            "german": "Er",
            "french": "Il"
    }, {
        "chinese": "她",
            "english": "She",
            "german": "Sie",
            "french": "Elle"
    }];

    var getKeysFromJson = function (obj) {
        var keys = [];
        for (var key in obj) {
            if (obj.hasOwnProperty(key)) {
                keys.push(key);
            }
        }
        return keys;
    };

    var createStore = function (json) {
        var keys = getKeysFromJson(json[0]);
        return Ext.create('Ext.data.Store', {
            fields: keys,
            data: json
        });
    };

    var createColumns = function (json) {
        var keys = getKeysFromJson(json[0]);
        return keys.map(function (field) {
            return {
                text: Ext.String.capitalize(field),
                width: 150,
                dataIndex: field
            };
        });
    };

    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        columns: [],
        dockedItems: {
            xtype: 'toolbar',
            dock: 'top',
            items: [{
                xtype: 'button',
                text: 'Movie stars',
                listeners: {
                    'click': function () {
                       ...