JSFiddle - React, Tailwind, and code Playground

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">

JavaScript

Ext.onReady(function () {
    Ext.Loader.setConfig({
        disableCaching: false,
        enabled: true,
        paths: {
            'Ext.ux': 'http://cdn.sencha.io/ext-4.2.0-gpl/examples/ux'
        }
    });

    Ext.define('App.model.User', {
        extend: 'Ext.data.Model',

        fields: [{
            name: 'id'
        }, {
            name: 'name'
        }]
    });
    Ext.define('App.store.Users', {
        extend: 'Ext.data.Store',
        requires: ['App.model.User'],

        constructor: function (cfg) {
            var me = this;
            cfg = cfg || {};
            me.callParent([Ext.merge({
                model: 'App.model.User',
                buffered: true,
                leadingBufferZone: 2,
                pageSize: 5,
                proxy: {
                    type: 'ajax',
                    api: {
                        read: "http://localhost/mockdata.php"
                    },
                    reader: {
                        type: 'json',
                        root: 'data',
                        messageProperty: 'message'
                    }
                }
            }, cfg)]);
        }
    });

    Ext.define('App.view.UserWindow', {
        extend: 'Ext.window.Window',
        alias: 'widget.userlist',

        requires: ['App.store.Users'],

        height: 600,
        width: 400,
        title: 'Load list',
        autoScroll: true,
        modal: true,
        closeAction: 'hide',
        buttons: [{
            text: 'Load',
            action: 'LoadList',
            disabled: true
        }],

        initComponent: function () {
            var me = this;
            var s = Ext.create('App.store.Users');
            s.loadPage(1);
            Ext.applyIf(me, {
                items: [{
                    xtype: 'grid',
                    store: s ,
                    columns: [
                        { text: 'Name',  dataIndex: 'name', flex: 1}
                    ],
                   ...