Extjs- Paging Toolbar Next Page and Previous Page Disable

Question

I have three parameters startdate, enddate and name which I have to send to the server to get back Json response. I am displaying the response in a GridPanel.

My Ajax Request looks like this:

FilterOperSet: function(button){
var win = button.up('window');
var form = win.down('form');
var start = form.getForm().findField('startDate').getSubmitValue();
var end = form.getForm().findField('endDate').getSubmitValue();
var act = form.getForm().findField('actor').getSubmitValue();
Ext.Ajax.request({ 
url: 'ListData',
params: { type: 'recordedRequest', startDate: start,
                 endDate: end, actor: act, start:0,limit:10 },

success: function(response) { 
var json = Ext.decode(response.responseText);
var mystore = Ext.data.StoreManager.lookup('RecordedRequestStore');
mystore.loadData(json.recordedRequests);
           }, 
           scope: this});
}

I have a button, when user enters values for startdate, enddate and name and clicks on the button the above listener sends them as parameters along with start and limit for paging and response is captured and stored in gridpanel.

My issue with paging toolbar is: I could see the following as response

recordedRequests
     // has some meta data here 

success
true

total
1339

But my paging tool bar show only one page and at bottom says 0 of 0 and to the right nothing to display. Infact it should say 1 of 14 and should allow me to go through next pages.

2) Also when I click on refresh button it calls my store and calls server, but i want to make a ajax request with startdate, enddate and name as parameters(which would be exactly what my button above listerner does)

My Store looks like this:

autoLoad: false, remoteFilter: true, buffered: false, pageSize: 10, //leadingBufferZone: 1000,

fields:['start', 'end', 'actor','serviceOp'],

proxy: {
    type: 'ajax',
    url: 'ListData',
    store: 'RecordedRequestStore',
    startParam:'start',
    limitParam:'limit',
    pageParam:'page',
    reader: {
        type: 'json',
        root: 'recordedRequests',
        successProperty: 'success',
        totalProperty: 'total'
    },

    extraParams: {  
        'type': 'recordedRequest',
    }, 

    //sends single sort as multi parameter
    simpleSortMode: true,

    // Parameter name to send filtering information in
    filterParam: 'query',

    // The PHP script just use query=<whatever>
    encodeFilters: function(filters) {
        return filters[0].value;
    }
},

listeners: {
    filterchange: function(store, filters, options){
        console.log( filters )
    },

    totalcountchange: function() {
        console.log('update count: ')
        //this.down('#status').update({count: store.getTotalCount()});
    }
}

Any sort of help will of great value for me. Thanks in Advance.

Answer 1

Instead of Ajax Request. I should use

store.load(params{your params})

For nextpage and previouspage I used beforeload listener for custom parameters.