Auto-saving via XmlHttpRequest from EditorGridPanel in ExtJS 3.0?

extjs, gridview, javascript

Solution

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.

Problem

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: - REST--just update via normal GET or POST - Insert new records, or delete rows--updates only for now. - Batch updates--just one cell edit at a time. - A bunch of code--this should be trivial, like the Ajax.InPlaceEditor in Scriptaculous

Original source