Auto-saving via XmlHttpRequest from EditorGridPanel in ExtJS 3.0?

Question

I have an EditorGridPanel in Ext JS 3.0, populated via HttpProxy and JsonReader, and I have an editable column "working"--I can edit the value and it flags it as dirty.

Now, how do I get it to, after a cell has been edited, send an XmlHttpRequest to the server with a few base parameters, the row's ID field, the name of the column changed, and the new value?

Once the request has been made, the server-side update is easy. But no amount of Google and digging through the trivial in-memory EditGridPanel examples is helping with getting the EditGridPanel to make the call.

What I'm not looking for:

1. REST--just update via normal GET or POST
2. Insert new records, or delete rows--updates only for now.
3. Batch updates--just one cell edit at a time.
4. A bunch of code--this should be trivial, like the Ajax.InPlaceEditor in Scriptaculous

Answer 1

I finally figured it out... just needed a writer on my store:

var ds = new Ext.data.JsonStore({
    autoSave:       true,
    url:            "ajax-handler.aspx",
    method:         "POST",
    timeout:        120000,
    root:           "rows",
    totalProperty:  "results",
    idProperty:     "primarykeyvalue",
    fields:         previewColumnConfig,
    baseParams:     {
        now:        (new Date()).getTime()
        },
    writer: new Ext.data.JsonWriter({
        encode:     true,
        listful:    false
        })
    });

Notes:

• The "now" baseparam is to get around "some browsers" (take a guess) caching of AJAX results
• "encode" returns POST variables rather than just a bare JSON result in POST.
• "listful" is disabled because the user is only editing one row/column at a time, no need to design the server-side parser to bring in an array, it can just expect one row.
• Yes, I have a really long timeout value.
• previewColumnConfig is defined beforehand, stores my column definitions.

Answer 2

You could use the afteredit event for Ext.grid.EditorGridPanel which will fire after the editor is blurred. Also you could set a periodic(Interval) checking method when the beforeedit event is fired and clear it when the afteredit event is fired.

Example for afteredit:

EditorGridPanel.getColumnModel().getCellEditor(column).on('afteredit', function() {
    //do ajax call for the update.
});

Let me know if you need an example for the periodic checker and I will write one up.