Saving edited record in a cell editing grid

Question

How can I save the edited record on click of the save button?

my code :

// create the Data Store
var store = Ext.create('Ext.data.Store', {
    //autoSync: true,
    autoLoad:true,
    autoDestroy: true,
    url: 'update_premise.php',
    model: 'Plant',
    proxy: {
        type: 'ajax',
        // load remote data using HTTP
        url: 'getLab.php',
        // specify a XmlReader (coincides with the XML format of the returned data)
        reader: {
            type: 'json'
        },
          writer: {
            type: 'json'

        }
    },
    sorters: [{
        property: 'lab_name',
        direction:'ASC'
    }]
});

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
    clicksToEdit: 1
});

// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [{
        id: 'lab_name',
        header: 'Common Name',
        dataIndex: 'lab_name',
        flex: 1,
        editor: {
            allowBlank: false
        }
    }],
    selModel: {
        selType: 'cellmodel'
    },
    renderTo: 'editor-grid',
    width: 600,
    height: 300,
    title: 'Lab?',
    frame: true,
    tbar: [
     {
         text: 'Save',
         handler: function ()
         {
               for (var i = 0; i <grid.store.data.items.length; i++) {
                 var record = grid.store.data.items [i];
                 if (record.dirty) {
                 }
             }
         }
     }
     ],
    plugins: [cellEditing]
});

Answer 1

You don't need to save via ajax calls sencha does all the checking and saving for you.

 for (var i = 0; i <grid.store.data.items.length; i++) {
        var record = grid.store.data.items [i];
        if (record.dirty) {
            ...
        }
 }

this part can be replaced by store.sync();

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.AbstractStore-method-sync

If you want to send the data to update to another url then to read you can configure your proxy with an api object in staid of a single url parameter.

proxy: {
    type: 'ajax',
    api: {
        read    : 'getLab.php',
        create  : 'setLab.php',
        update  : 'setLab.php',
        destroy : 'deleteLab.php'
    }
    reader: {
        type: 'json'
    },
    writer: {
        type: 'json'

    }
}

Answer 2

Basically it depends on your server side. If you want to save by the ajax request, you should use something like this:

Ext.Ajax.request({
    url: '/Some/Save',
    method: 'POST',
    params: {
        'RecordId': record.get('Id'),
        'RecordValue': record.get('Value')
    }
})

You should use the code above inside your if statement:

if (record.dirty) {
    //Save code
}

Also you could combine all rows in one big object and use it in the request.

As for the cell editor plugin, it was designed to save records automatically. You should use the validateedit event. The documentation is here: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.CellEditing-event-validateedit