javascript - Sencha Ext JS sort criteria sent as a String instead of JSON -

i trying implement server-side sorting sencha ext js , noticed odd. paging portion of json looks fine sort property set string , not array:

actual:

{"page":1,"start":0,"limit":50,"sort":"[{\"property\":\"firstname\",\"direction\":\"asc\"}]"} 

expected:

{"page":1,"start":0,"limit":50,"sort":[{"property":"firstname","direction":"asc"}]} 

ext js:

ext.require([     'ext.grid.*',     'ext.data.*',     'ext.panel.*',     'ext.layout.container.border' ]);  ext.define('customer',{     extend: 'ext.data.model',     fields: [       {name: 'id',        type: 'int'},       {name: 'firstname', type: 'string'},       {name: 'lastname',  type: 'string'},       {name: 'companyname',  type: 'string'}     ] });  ext.onready(function(){     var itemsperpage = 50; // paging      var store = ext.create('ext.data.store', {         pagesize: itemsperpage,         // autoload: true,         autoload: {start: 0, limit: itemsperpage},         autosync: true,          model: 'customer',         remotesort: true,         proxy: {             paramsasjson: true,             actionmethods: {                 read: 'post'             },             type: 'rest', // was... 'ajax',             url: '/customers',             reader: {                 type: 'json',                 root: 'content',                 totalproperty: 'totalelements'             },             writer: {                 type: 'json'             },             listeners: {                 write: function(store, operation){                     var record = operation.getrecords()[0],                         name = ext.string.capitalize(operation.action),                         verb;                      if (name == 'destroy') {                         record = operation.records[0];                         verb = 'destroyed';                     } else {                         verb = name + 'd';                     }                     ext.example.msg(name, ext.string.format("{0} user: {1}", verb, record.getid()));                  }             }                     }     });          var rowediting = ext.create('ext.grid.plugin.rowediting', {         listeners: {             canceledit: function(rowediting, context) {                 // canceling editing of locally added, unsaved record: remove                 if (context.record.phantom) {                     store.remove(context.record);                 }             }         }     });          // create grid     var grid = ext.create('ext.grid.panel', {         bufferedrenderer: false,         store: store,         columns: [             {text: "id", width: 120, dataindex: 'id', sortable: true},             {text: "first name", flex: 1, dataindex: 'firstname', sortable: true, editor: 'textfield'},             {text: "last name", width: 125, dataindex: 'lastname', sortable: true, editor: 'textfield'},             {text: "company name", width: 125, dataindex: 'companyname', sortable: true}         ],         forcefit: true,         height:210,         split: true,         region: 'north',         plugins: [rowediting],          // paging         dockeditems: [{             xtype: 'pagingtoolbar',             store: store,   // same store gridpanel using             dock: 'bottom',             displayinfo: true         }],     });          // define template use detail view     var customertplmarkup = [         'id: {id}<br/>',         'first name: {firstname}<br/>',         'last name: {lastname}<br/>',         'company name: {companyname}<br/>'     ];     var customertpl = ext.create('ext.template', customertplmarkup);          ext.create('ext.panel', {         renderto: 'binding-example',         frame: true,         title: 'customer list',         width: 580,         height: 400,         layout: 'border',         items: [             grid, {                 id: 'detailpanel',                 region: 'center',                 bodypadding: 7,                 bodystyle: "background: #ffffff;",                 html: 'please select customer see additional details.'         }]     });          // update panel body on selection change     grid.getselectionmodel().on('selectionchange', function(sm, selectedrecord) {         if (selectedrecord.length) {             var detailpanel = ext.getcmp('detailpanel');             detailpanel.update(customertpl.apply(selectedrecord[0].data));         }     });      }); 

i had same problem. solve this, added beforeload listener store.

here working example:

listeners: {         beforeload: function(store, operation, eopts){             var sort = [];             var filter = [];             if(operation._sorters){                 for(var = 0; i< operation._sorters.length; i++){                     var direction = operation._sorters[i]._direction;                     var property = operation._sorters[i]._property;                     sort.push({                          "direction" : direction,                         "property"  : property                     });                 }                 operation._proxy.extraparams = {sort:sort};             }              if(operation._filters){                 for(var = 0; i< operation._filters.length; i++){                     var operator = operation._filters[i]._operator;                     var property = operation._filters[i]._property;                     var value = operation._filters[i]._value;                     filter.push({                          "operator" : operator,                         "property"  : property,                         "value"  : value                     });                 }                 operation._proxy.extraparams = {filter:filter};             }         }     }