JSFiddle - React, Tailwind, and code Playground

by acteon

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css">

JavaScript

Ext.require([    
    'Ext.form.*',
    'Ext.tip.*',
    'Ext.grid.*',
    'Ext.data.*'
]);

Ext.onReady(function () {
    var store = Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
        fields: ['name', 'email', 'phone'],
        data: {
            'items': [{
                'name': 'Lisa',
                    "email": "[email protected]",
                    "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                    "email": "[email protected]",
                    "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                    "email": "[email protected]",
                    "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                    "email": "[email protected]",
                    "phone": "555-222-1254"
            }]
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
    var form = Ext.create('Ext.form.Panel', {
        title: "FormLayout Panel",
        layout: 'form',
        renderTo: Ext.getBody(),
        bodyPadding: 5,
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        }, {
            xtype: 'grid',
            title: 'Simpsons',
            store: store,
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Phone',
                dataIndex: 'phone'
            }],
        }]
    });
});