Tutorial :Auto-saving via XmlHttpRequest from EditorGridPanel in ExtJS 3.0?


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


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          })      });  


  • 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.


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.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »