如何在网格分页和ExtJS 6.1排序中将有效负载作为jsonObject传递？

Question

我能够在正确进行初始搜索时传递有效负载。在chrome中，我看到Request payload如下：

{"from":0,"size":25}, "sort":[{"DEPTNO":"asc"}],"query":{"bool":{"must":[{"query_string":{"default_field":"DEPTNO","query":"1"}}]}};

我不确定如何在分页和排序点击时传递有效负载？
我对restfull Web服务请求没有任何控制权。我收到Payload请求： page=2&start=25&limit=25

点击分页时，我的有效负载请求应如下所示。
var payload =  {"from":0,"size":25}, "sort":[{"DEPTNO":"asc"}],"query":{"bool":{"must":[{"query_string":{"default_field":"DEPTNO","query":"1"}}]}};

 分页和排序时。我正在改变大小或排序对象。

var payload =  '{"from":25,"size":25}, "sort":[{"DEPTNO":"desc"}],"query":{"bool":{"must":[{"query_string":{"default_field":"DEPTNO","query":"1"}}]}}';    // form button click.  
  
handleSearch: function(from) {     
    var searchresgrid = from.up('departmentlookup').down('departmentlookupgrid');    
    var searchresstore = searchresgrid.getStore();     
    searchresgrid.getStore().clearFilter();    
    searchresgrid.getStore().removeAll();      
    searchresstore.getSorters().clear();           // Generating payload from form. I am not sending anything as request parameters.
            
    var payload =  '{"from":0,"size":25}, "sort":[{"DEPTNO":"asc"}],"query":{"bool":{"must":[{"query_string":{"default_field":"DEPTNO","query":"1"}}]}}';            // below request is working correctly
         
    searchresgrid.getStore().load({      
        jsonData: payload     
    });       
} 
Ext.define('LookupApp.view.Lookup.DepartmentLookupModel', {  
    extend: "Ext.data.Model",
      fields: [{
        name: '_id',
        mapping: '_id',
        type: 'string'
    }, {
        name: 'deptno',
        mapping: '_source.DEPTNO',
        type: 'int'
    }, {
        name: 'name',
        mapping: '_source.NAME',
        type: 'string'
    }]
});

Ext.define('LookupApp.view.Lookup.AjaxWithPayload', {  
    extend: 'Ext.data.proxy.Ajax',
      alias: '**proxy.ajaxwithpayload**',

      actionMethods: {    
        create: "POST",
        read: "POST",
        update: "POST",
         destroy: "POST"  
    },
        headers: {     
        'Content-Type': 'application/json'   
    },


         buildRequest: function(operation) {    
        var request = this.callParent(arguments);

             // For documentation on jsonData see Ext.Ajax.request
            
        request.setJsonData(operation.jsonData);          // Do not change params to support GET params
             // and extra params from proxy
             // request.setParams(operation.getParams());
            
        return request;  
    },
        applyEncoding: function(value) {    
        return value;  
    }
});

// Store
Ext.define('LookupApp.view.Lookup.DepartmentLookupStore', {  
    extend: 'Ext.data.Store',
       requires: ['LookupApp.view.Lookup.DepartmentLookupModel',        'LookupApp.view.Lookup.AjaxWithPayload'       ],
           model: 'LookupApp.view.Lookup.DepartmentLookupModel',
         autoLoad: false,
       pageSize: 25,
      sortOnLoad: true,
      remoteSort: true,
      proxy: {    
        type: '**ajaxwithpayload**',
            url: base_lookup_url + 'lookup_department/_search',
            reader: {      
            type: 'json',
                  rootProperty: 'hits.hits',
               totalProperty: 'hits.total'    
        }  
    },
      baseParams: {    
        action: '',
            pagination: true,
            storeCntry: ''  
    },
        sorters: [new Ext.util.Sorter({    
        property: 'deptno',
            direction: 'ASC',
             //"ignore_unmapped" : true
          
    })],
         listeners: {    
        beforeload: function(store, operation, eOpts) {          
            alert("DepartmentLookupStore beforeload 1 store.pageSize = " + store.pageSize);       //store.getSorters().clear();
                  
            alert("DepartmentLookupStore beforeload 1 - 1 store.sorters = " + store.sorters + " store.sorters.length = " + store.sorters.length);              // hard coded payload. I am generating payload object while clicking pagination
                  
            var payload = '{"from":50,"size":25,"sort":[{"DEPTNO":"asc"}, "query":{"bool":{"must":[{"query_string":{"default_field":"CONCEPT","query":"TEST"}},{"query_string":{"default_field":"COUNTRY","query":"USA"}}]}}]}';    
        }   
    }
});

// GRID
Ext.define('LookupApp.view.Lookup.DepartmentLookupGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.departmentlookupgrid',
    store: 'LookupApp.view.Lookup.DepartmentLookupStore',
    border: true,
    selType: 'cellmodel',
    loadMask: true,
    viewConfig: {
        //enableTextSelection : true
    },
      dockedItems:         [          {            
        xtype: 'pagingtoolbar',
                     //store: this.store,
                    store: 'LookupApp.view.Lookup.DepartmentLookupStore',
                    dock: 'bottom',
                    displayInfo: true,
                    displayMsg: 'Number of Records : {2}',
               displayMsg: i18n_lookup.text.rowsdisplayMsg,
                //emptyMsg: i18n_lookup.text.norows,
               emptyMsg: 'no records',
                //stateIdStart: 'start',
               listeners: {         
            beforechange: function(paging, page, eopts) {                      
                var payload = '{"query":{"bool":{"must":[{"query_string":{"default_field":"CONCEPT","query":"TEST"}},{"query_string":{"default_field":"COUNTRY","query":"USA"}}]}},"from":2,"size":25,"sort":[{"DEPTNO":"asc"}]}'; 

                         
            }       
        }          
    }       ],
          initComponent: function() {   
        alert("DepartmentLookupGrid initComponent  BEGIN");
        var sm = new Ext.selection.CheckboxModel({});        
        this.selModel = sm;
        this.columns = [{         
            header: i18n_lookup.header.dept,
                     flex: 30,
                     dataIndex: 'deptno',
                     align: 'center',
                     tdCls: "bbb-core-renderer-numbernoformat",
                     sortable: true       
        }, {                
            header: i18n_lookup.header.deptname,
                     flex: 145,
                     align: 'center',
                     dataIndex: 'name',
                     sortType: 'alphanum',
                     sortable: true       
        }];
        this.callParent();
    }
});