JSFiddle - React, Tailwind, and code Playground

by asgoth

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Only Grid with Model</title>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css">
    <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-debug.js"></script>
    <script type="text/javascript">
        <!--below js code here -->
    </script>
    </head>
<body>
<div id="div1"></div>
</body>
</html>

JavaScript

Ext.Loader.setConfig({
    enabled: true,
    disableCaching: false
});

Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.selection.CheckboxModel'
    ]);

var sm = Ext.create('Ext.selection.CheckboxModel');
Ext.define('SuperUser', {
    extend: 'Ext.data.Model',
    fields: [
        {
        name: 'fname',
        type: 'string'},
    {
        name: 'lname',
        type: 'string'},
    {
        name: 'email',
        type: 'string'},
    {
        name: 'uid',
        type: 'string'},
    {
        name: 'isSup',
        type: 'boolean'},
    {
        name: 'upDate',
        type: 'string'},
    {
        name: 'upBy',
        type: 'string'}
    ]
});

var data = {
    success: true,
    total: 10,
    users: [
        {
        "fname": "Jane",
        "lname": "Smith",
        "email": "[email protected]",
        "uid": "jsmith",
        "isSup": false,
        "upDate": "11-19-2012",
        "upBy": "[email protected]"},
    {
        "fname": "Jim",
        "lname": "Smith",
        "email": "[email protected]",
        "uid": "jmsmith",
        "isSup": true,
        "upDate": "11-23-2012",
        "upBy": "[email protected]"},
    {
        "fname": "Jane",
        "lname": "Smith",
        "email": "[email protected]",
        "uid": "jsmith",
        "isSup": false,
        "upDate": "11-19-2012",
        "upBy": "[email protected]"},
    {
        "fname": "Jim",
        "lname": "Smith",
        "email": "[email protected]",
        "uid": "jmsmith",
        "isSup": true,
        "upDate": "11-23-2012",
        "upBy": "[email protected]"},
    {
        "fname": "Jane",
        "lname": "Smith",
        "email": "[email protected]",
        "uid": "jsmith",
        "isSup": false,
        "upDate": "11-19-2012",
        "upBy": "[email protected]"},
    {
        "fname": "Jim",
        "lname": "Smith",
        "email": "[email protected]",
        "uid": "jmsmith",
        "isSup": true,
        "upDate": "11-23-2012",
       ...