JSFiddle - React, Tailwind, and code Playground

by amitaviv99

HTML

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

JavaScript

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', 'http://cdn.sencha.com/ext-4.2.0-gpl/examples/ux/');

Ext.require([
    'Ext.ux.ajax.JsonSimlet',
    'Ext.ux.ajax.SimManager'
]);
Ext.onReady(function () {
    Ext.ux.ajax.SimManager.init({
        delay: 1000,
        defaultSimlet: null
    }).register({
        'Numbers': {
            data: [[1, 'One'], [2, 'Two'], [3, 'Three'], [4, 'Four'], [5, 'Five']],
            stype: 'json'
        }
    });

    Ext.create('Ext.grid.Panel', {
        width: 350,
        height: 220,
        title: 'Numbers',
        style: 'padding: 20px',
        renderTo: document.body,
        features: [{
            ftype: 'summary'
        }],
        store: {
            fields: [ 'number', 'numberName' ],
            proxy: {
                type: 'ajax',
                url: 'Numbers',
                reader: 'array'
            },
            autoLoad: true
        },
        columns: [{
            dataIndex: 'numberName',
            text: 'Name',  
        }, {
            dataIndex: 'number',
            text: 'Number',            
        }],
        listeners: {
            viewready: function(grid){
                grid.getView().on({
                    refresh: {
                        fn: function(){
                            if(grid.store.getAt(0).get('number') == 1) {
                                grid.columns[1].hide();
                            }
                        },
                        single: true
                    }
                });
            }
        }
    });
});