Editable Grid ExtJS, how to update row in database after editing row on grid

extjs, extjs-grid, extjs3, javascript

Solution

The easiest way for you is to send an ajax request on each change

{
    id: 'firstname',
    header: 'Firstname',
    dataIndex: 'firstname',
    width: 220,
    // use shorthand alias defined above
    editor: new fm.TextField({
        allowBlank: false,
        listeners : {
            change : function(field, e) {
                Ext.Ajax.request({
                    url: '/grid/save', // your backend url
                    method: 'POST',
                    params: {
                        'id': grid.getSelectionModel().selection.record.get('id'),
                        'firstname': field.getValue()
                    }
                });
            }
        }
    })
}

but I think you should take a look at the extjs examples and read more about the Store communication with the server (for example with REST).

Problem

Firstly, sorry for my not very good english! I need make next thing: ExtJS 3.4 Editable Grid (example), which will work with json format. Input source is in json format. I did it, all work fine, like in example. I did: - data downloading from database to array in php - array is encoded to json format - editable grid source is a page with json message now all working fine. Now I need make this: I need to update data in database on cell updating in grid. How can I do this? Didn't find anything in web. Maybe there are some method like 'OnCellEditting' like in delphi7? My js code: ``` Ext.onReady(function () { function formatDate(value) { return value ? value.dateFormat('M d, Y') : ''; } // shorthand alias var fm = Ext.form; // the column model has information about grid columns // dataIndex maps the column to the specific data field in // the data store (created below) var cm = new Ext.grid.ColumnModel({ // specify any defaults for each column defaults: { sortable: false // columns are not sortable by default }, columns: [{ header: 'ID', dataIndex: 'id', width: 30 }, { id: 'firstname', header: 'Firstname', dataIndex: 'firstname', width: 220, // use shorthand alias defined above editor: new fm.TextField({ allowBlank: false }) }, { header: 'Lastname', dataIndex: 'lastname', width: 220, // use shorthand alias defined above editor: new fm.TextField({ allowBlank: false }) }] }); // create the Data Store var store = new Ext.data.JsonStore({ totalProperty: 'total', // total data, see json output root: 'results', // see json output url: '/grid/json', fields: [ 'firstname', 'lastname'] }); // create the editor grid var grid = new Ext.grid.EditorGridPanel({ store: store, cm: cm, renderTo: 'grid-editable', width: 440, height: 300, autoExpandColumn: 'firstname', // column with this id will be expanded title: 'Edit Plants?', frame: true, clicksToEdit: 1 }); // manually trigger the data store load store.load({ // store loading is asynchronous, use a load listener or callback to handle results }); }); ```

Original source