JSFiddle - React, Tailwind, and code Playground

by klodoma

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/modern/theme-triton/resources/theme-triton-all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-modern-all.js"></script>
<script src="https://cdn.jsdelivr.net/gh/klodoma/playground/js/UserAgents.js"></script>
<script>
let userAgent = new UserAgents();
userAgent.set('tablet');
</script>

JavaScript

Ext.application({
    name: 'MyApp',

    launch: function () {

        Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: ['name', 'email', 'phone']
        });

        var userStore = Ext.create('Ext.data.Store', {
            model: 'User',
            data: [{
                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'
            }]
        });

        let grid = Ext.create('Ext.grid.Grid', {
            store: userStore,
            title: 'Application Users',
            columns: [{
                text: 'Name',
                width: 100,
                sortable: false,
                hideable: false,
                dataIndex: 'name'
            }, {
                text: 'Email Address',
                width: 150,
                dataIndex: 'email',
                hidden: true
            }, {
                text: 'Phone Number',
                flex: 1,
                dataIndex: 'phone'
            }]
        });

        console.log("Version " + Ext.os.version, Ext.os);

        Ext.Viewport.add(
            grid
        );

    }
});