JSFiddle - React, Tailwind, and code Playground

by marcusschiesser

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/extjs/4.1.0.b1/resources/css/ext-all.css">

JavaScript

Ext.onReady(function() {
    // creates an Person class - instances of that class
    // will be stored in the data store
    Ext.define('Person', {
        extend: 'Ext.data.Model',
        fields: ['firstName', 'lastName']
    });

    // the proxy to get the data from
    // for 'real' applications this should be included in another file
    // that way it's possible to exchange between mockup and real data 
    // by simple exchaning a script include
    var peopleProxy = new Ext.data.MemoryProxy({
        root: [{
            firstName: 'Homer',
            lastName: 'Simpson'}]
    });


    var people = Ext.create('Ext.data.Store', {
        model: 'Person',
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'root'
            }
        }
    });

    people.load();

    grid = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: people,
        columns: [
            {
            header: 'First name',
            width: 100,
            dataIndex: 'firstName'},
        {
            header: 'Last name',
            width: 150,
            dataIndex: 'lastName'}

        ]
    });

    button = Ext.create('Ext.Button', {
        text: 'Add Person',
        handler: function() {
            if (Math.random() < 0.5) {
                people.add(new Person({
                    firstName: 'Ned',
                    lastName: 'Flanders'
                }));
            }
            else {
                people.add(new Person({
                    firstName: 'C.M.',
                    lastName: 'Burns'
                }));
            }
        }
    });

    Ext.create('Ext.Container', {
        renderTo: Ext.getBody(),
        items: [grid, button]
    });

});