JSFiddle - React, Tailwind, and code Playground

by chaoszcat

HTML

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

JavaScript

/**
 * Usually I create my own component so it
 * would be very clean if it itself requires
 * lots of customizations
 */
Ext.define('NS.grid.TesterGrid', {
    extend: 'Ext.grid.Panel',
    initComponent: function() {
        var me = this;
                
        Ext.apply(me, {
            border: false,
            store: Ext.create('Ext.data.Store', {
                fields: ['id', 'country'],
                data: [
                    {id: 1, country: 'Afghanistan'},
                    {id: 2, country: 'Albania'}
                ]
            }),
            columns: [{
                dataIndex: 'id',
                header: 'ID'
            },{
                dataIndex: 'country',
                header: 'Country',
                flex: 1,
                field: {
                    xtype: 'combo',
                    typeAhead: true,
                    triggerAction: 'all',
                    selectOnTab: true,
                    store: [
                        ['Afghanistan', 'Afghasnitan'],
                        ['Albania', 'Albania']
                    ],
                    lazyRender: true
                }
            }],
            
            tbar: [{
                text: 'Add Record',
                //Clean right?
                handler: me.onAddRecord,
                scope: me
            }],
            
            plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })]
             
        });
        me.callParent();
    },
    
    /**
     * Handling the action when user
     * click on the Add Record button
     */
    onAddRecord: function() {
        var me = this;
        var r = Ext.ModelManager.create({}, me.store.model);
        me.store.insert(0, r);
        me.plugins[0].startEditByPosition({row:0, column:1});
    }
});


Ext.onReady(function() {
    Ext.create('NS.grid.TesterGrid', {
        renderTo: Ext.getBody()
    });
});