Question

I have a JsonStore configured like so:

var store = new Ext.data.JsonStore({
    restful: true,
    url: '/categories',
    remoteSort: true,
    idProperty: 'Id',
    totalProperty: 'total',
    root: 'results',
    writer: new Ext.data.JsonWriter({
        encode: false
    }),

    fields: [ 'Id', 'Name' ]
});

I grab some data from the server, then edit one of the records. When I tell the store to save, it sends this JSON back to the server:

{
    "results":
    {
        "Name":"Trivial123",
        "Id":2
    }
}

The store is wrapping the JSON inside the results property (the root property configured on the store). However, the server expects this:

{
    "Name":"Trivial123",
    "Id":2
}

In other words, the serialized entity should be put directly in the response body, and not wrapped in a property. Does anyone know how I can configure the store to do this?

Answer 1

You need to override the data rendering function in the JsonWriter, like so:

var rootlessRenderFunction = function (params, baseParams, data) {
   if (this.encode === true) {
      Ext.apply(params, baseParams);
      params = Ext.encode(data);
   } else {
      params.jsonData = data;
   }
};

var myWriter = new Ext.data.JsonWriter({
   encode: false,
   writeAllFields: true
});
myWriter.render = rootlessRenderFunction;

var myStore = new Ext.data.JsonStore({
   // ... various config values ...
   writer: myWriter
});

This “rootlessRenderFunction” implementation is the same as the Ext JsonWriter’s render code except it doesn’t interpose a root in the request data.

This is a hack, of course.