JavaScript
Data
Run Code
Open in Fiddle
Ext.require('*'); Ext.onReady(function() { Ext.create('Ext.grid.Panel', { frame: true, store: Ext.create('Ext.data.Store', { fields: ['car', 'driver'], proxy: { url: '/caranddrivers', type: 'ajax' }, autoLoad: true }), plugins: Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }), columns: [{ text: 'Car', dataIndex: 'car', editor: { xtype: 'textfield' } }, { text: 'Driver', flex: 1, dataIndex: 'driver', getEditor: function( record, defaultField ) { return Ext.create('Ext.grid.CellEditor', { field: Ext.create( 'Ext.form.field.ComboBox', { queryMode: 'local', displayField: 'label', valueField: 'value', store: Ext.create('Ext.data.Store', { fields: ['label', 'value'], proxy: { url: '/drivers', type: 'ajax' }, autoLoad: true }) }) }) } /*editor: { xtype: 'combobox', queryMode: 'local', displayField: 'label', valueField: 'value', store: Ext.create('Ext.data.Store', { fields: ['label', 'value'], proxy: { url: '/drivers', type: 'ajax' }, autoLoad: true }) }*/ }], dockedItems: [{ xtype: 'toolbar', items: [{ xtype: 'button', text: 'Show Modified Records in Console', handler: function(btn) { var store = btn.up('grid').getStore(); console.log(store.getModifiedRecords()); } }] }], renderTo: Ext.getBody() }); }); // or replace all text with a URL