Javascript Sencha Ext JS排序条件作为字符串而不是JSON发送

我试图用Sencha Ext JS实现服务器端排序，但发现了一些奇怪的东西。JSON的分页部分看起来不错，但排序属性设置为字符串而不是数组：

实际：

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

预期：

{"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 a locally added, unsaved record: remove it
                if (context.record.phantom) {
                    store.remove(context.record);
                }
            }
        }
    });    

    // create the 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 is using
            dock: 'bottom',
            displayInfo: true
        }],
    });    

    // define a template to use for the 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 a customer to 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));
        }
    });    

});

Ext.require([
“Ext.grid.*”，
“Ext.data.*”，
“Ext.panel.*”，
“Ext.layout.container.Border”
]);
Ext.define（‘客户’{
扩展：“Ext.data.Model”，
字段：[
{name:'id'，type:'int'}，
{name:'firstName'，键入：'string'}，
{name:'lastName'，键入：'string'}，
{name:'companyName'，键入：'string'}
]
});
Ext.onReady（函数（）{
var itemsPerPage=50；//分页
var store=Ext.create（'Ext.data.store'{
pageSize:itemsPerPage，
//自动加载：对，
自动加载：{start:0，limit:itemsPerPage}，
自动同步：对，
型号：“客户”，
remoteSort：是的，
代理：{
是的，
行动方法：{
读：“邮报”
},
键入：“rest”，//was…“ajax”，
url:“/customers”，
读者：{
键入：“json”，
root:'内容'，
totalProperty:“totalElements”
},
作者：{
键入：“json”
},
听众：{
写入：函数（存储、操作）{
var record=operation.getRecords（）[0]，
name=Ext.String.capitalize（operation.action），
动词；
如果（名称=‘销毁’）{
记录=操作。记录[0]；
动词=‘销毁’；
}否则{
动词=名称+d'；
}
msg（名称，Ext.String.format（“{0}用户：{1}”，动词，record.getId（））；
}
}            
}
});    
var rowEditing=Ext.create（'Ext.grid.plugin.rowEditing'{
听众：{
取消编辑：功能（行编辑、上下文）{
//取消编辑本地添加的未保存记录：将其删除
if（context.record.phantom）{
store.remove（context.record）；
}
}
}
});    
//创建网格
var grid=Ext.create（'Ext.grid.Panel'{
bufferedRenderer:错，
店:店,，
栏目：[
{文本：“ID”，宽度：120，数据索引：“ID”，可排序：true}，
{text:“First Name”，flex:1，dataIndex:'firstName'，sortable:true，editor:'textfield'}，
{text:“Last Name”，宽度：125，数据索引：'lastName'，可排序：true，编辑器：'textfield'}，
{文本：“公司名称”，宽度：125，数据索引：“公司名称”，可排序：true}
],
forceFit：对，
身高：210，
斯普利特：是的，
地区：'北'，
插件：[行编辑]，
//寻呼
摘要：[{
xtype:“pagingtoolbar”，
store:store，//使用的是同一个store GridPanel
船坞：“底部”，
displayInfo:true
}],
});    
//定义用于局部视图的模板
var customerTplMarkup=[
'ID:{ID}
'，
'名字：{firstName}
'，
“姓氏：{lastName}
”，
'公司名称：{companyName}
'
];
var customerTpl=Ext.create（'Ext.Template'，customerTplMarkup）；
Ext.create（'Ext.Panel'{
renderTo:'绑定示例'，
框架：对，
标题：“客户名单”，
宽度：580，
身高：400，
布局：“边框”，
项目：[
网格{
id:“detailPanel”，
地区：'中心'，
车身衬垫：7，
车身风格：“背景：#ffffff；”，
html:“请选择一个客户以查看其他详细信息。”
}]
});    
//在选择更改时更新面板主体
grid.getSelectionModel（）.on（'selectionchange'，函数（sm，selectedRecord）{
如果（已选择记录长度）{
var detailPanel=Ext.getCmp（'detailPanel'）；
detailPanel.update（customerTpl.apply（selectedRecord[0].data））；
}
});    
});

我也有同样的问题。为了解决这个问题，我在存储中添加了beforeload侦听器

以下是一个工作示例：

listeners: {
        beforeload: function(store, operation, eOpts){
            var sort = [];
            var filter = [];
            if(operation._sorters){
                for(var i = 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 i = 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};
            }
        }
    }

侦听器：{
加载前：功能（存储、操作、eOpts）{
var排序=[]；
var过滤器=[]；
if（分拣机操作）{
用于（变量i=0；i<操作。\u sorter.length；i++）{
var方向=操作。\分拣机[i]。\方向；
var属性=操作。\分拣机[i]。\属性；
sort.push（{
“方向”：方向，
“财产”：财产
});
}
操作。_proxy.extraParams={sort:sort}；
}
if（操作。\u过滤器）{
对于（变量i=0；i<操作。\u filters.length；i++）{
var运算符=操作。\过滤器[i]。\运算符；
var属性=操作。\过滤器[i]。\属性；
var值=操作。_过滤器[i]。_值；
filter.push（{
“操作员”：操作员，
“财产”：财产，
“价值”：价值
});
}
操作。_proxy.extraParams={filter:filter}；
}
}
}