How to send a request whenever the grid is edited?
Ext.define('TonyTuan.User', { extend : 'Ext.data.Store', fields : [ 'id', 'name', 'role' ], data : [ { id : '1', name : 'Tony', role : 'Programmer' }, { id : '2', name : 'Steve', role : 'Programmer' }, { id : '3', name : 'Alice', role : 'Manager' } ], proxy : { type : 'rest', url : 'rest/users', reader : { type : 'json' } } });The Role store for combobox.
Ext.define('TonyTuan.Role', { extend : 'Ext.data.Store', fields : [ 'display', 'value' ], // fake data data : [ { display : 'Programmer', value : 'Programmer' }, { display : 'Designer', value : 'Designer' }, { display : 'Project Manager', value : 'Manager' } ] });The user grid with a rowEditing plugin listens on an edit event which is fired whenever records in grid are changed. Therefore, we can send a http PUT request by calling record.save() in the edit event handler.
Ext.define('TonyTuan.UserGrid', { extend : 'Ext.grid.Panel', width : 300, store : Ext.create('TonyTuan.User'), selType : 'rowmodel', plugins : [ { ptype : 'rowediting' // enable row editing } ], initComponent : function() { var me = this; me.columns = [ { header : 'id', dataIndex : 'id' }, { header : 'name', dataIndex : 'name' }, { header : 'Role', dataIndex : 'role', editor : { // for editable field, set a proper field xtype for it xtype : 'combobox', store : Ext.create('TonyTuan.Role'), queryMode : 'local', editable : false, displayField : 'display', valueField : 'value', allowBlank : false } } ]; // Listen on the edit event to send a request to server me.on('edit', function(editor, e) { e.record.save({ success : function(record, operation) { // (show successful message here) me.store.load(); }, failure : function(record, operation) { // (show error message here) // clear the dirty state and rollback the records me.store.rejectChanges(); } }); }); me.callParent(arguments); } });
Ext.create('TonyTuan.UserGrid', { renderTo : Ext.getBody() });Online Demo on Sehcna Fiddle