JSFiddle - React, Tailwind, and code Playground

by Johan Vandeplas

HTML

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

JavaScript

var API_URLS;
(function(){
    var base = "http://94.227.157.76:1337/";
    API_URLS = {
        eventList: base + "evenementen",
        eventByDate: base + "evenementenByDate", //([start], [end])
        eventByVereniging: base + "evenementenByVereniging", // (id)
    };
}());
    
//model definitie    
Ext.define('Event', {
    extend: 'Ext.data.Model',
    fields: [
        {
            name: 'id',
            mapping: 'evenement_id',
            type: 'int'
        },
        {
            name: 'name',
            mapping: 'naam'
        },
        {
            name: 'place',
            mapping: 'plaats'
        },
        {
            name: 'start'
        },
        {
            name: 'end',
            mapping: 'einde'
        },
        
    ]
    
});
    
//store definitie    
Ext.define('EventStore', {
    extend: 'Ext.data.Store',
    model: 'Event',
    proxy: {
        type: 'ajax',
        api: {
            read: API_URLS.eventList,
            byDate: API_URLS.eventByDate
        },
        reader: {
           type: 'json',
           root: 'root'
        }
    },
    
    loadList: function(options){
        var me = this;
        me.getProxy().api.read = API_URLS.eventList
        me.load(options);
    },
    
    getByDate: function(options){
        var me = this;
        
        var operation;

        options = Ext.apply({
            action: 'byDate',
            filters: me.filters.items,
            sorters: me.getSorters()
        }, options);
        me.lastOptions = options;
console.log('options', options);
        operation = new Ext.data.Operation(options);
console.log('operation', operation);        

        if (me.fireEvent('beforeload', me, operation) !== false) {
            me.loading = true;
            me.proxy.read(operation, me.onProxyLoad, me);
        }

        return me;
    },
    
    getByVerening: function(options){
        var me = this;
        me.getProxy().api.read = API_URLS.eventByVereniging
       ...