JSFiddle - React, Tailwind, and code Playground

by vero4ka

JavaScript

var stateStore = Ext.create('Ext.data.Store', {
    fields: ['name'],
    data : [
        {"name":"Alabama"},
        {"name":"Alaska"},
        {"name":"Arizona"}
    ]
});

var gridStore = Ext.create('Ext.data.Store', {
    fields:['firstName', 'state'],
    data:{'items':[
        {"firstName":"Lisa", "state":"Alabama"},
        {"firstName":"Bart", "state":"Alabama"},
        {"firstName":"Homer", "state":"Alabama"},
        {"firstName":"Marge", "state":"Arizona"}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: gridStore,
    columns: [{
        header: 'First Name',  
        dataIndex: 'firstName', 
        flex: 1, 
        editor: 'textfield'
    }, {
        header: 'State', 
        dataIndex: 'state', 
        flex: 1, 
        editor: {
            xtype: 'combobox', 
            store: stateStore, 
            queryMode: 'local', 
            displayField: 'name', 
            valueField: 'name',
            listeners: {
                select: function(combo, recs, opts){
                    combo.fireEvent('blur');
                }
            }
        }
    }],
    selType: 'cellmodel',
    plugins: [{
        ptype: 'cellediting',
        clicksToEdit: 2
    }],
    height: 150,
    width: 200,
    renderTo: Ext.getBody()
});