JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://dev.sencha.com/extjs/5.0.0/ext-all-debug.js"></script>
<link rel="stylesheet" href="http://dev.sencha.com/extjs/5.0.0/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css">
JavaScript
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
{"name":"Homer", "email":"homer@simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'},
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{header: 'Phone', dataIndex: 'phone'}
],
selType: 'cellmodel',
plugins: {
ptype: 'cellediting',
pluginId: 'biddingcelledit',
clicksToEdit: 1
},
height: 200,
width: 400,
renderTo: Ext.getBody(),
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
text: 'Edit',
handler: function(sender) {
var grid = sender.up('grid');
var plugin = grid.getPlugin('biddingcelledit');
console.log(grid.plugins);
console.log(plugin);
plugin.startEditByPosition({ row: 0, column: 1 });
}
}
]
}
]
});
});