EXTJS 5.0: Infinite Grid scrolling not working with extraParams in store

Question

I am using ExtJS 5.0.1. I have a grid which does not autoLoad. Once the store is manually loaded by using the click button in TopBar, the grid receives records. I am trying to implement infinite scroll on this grid. My store has extra params that need to be passed to the backend in order to get the records. After the first page is loaded, for the second page, no extra params are passed to the backend. How can I correct this? My store looks as follows ->

Ext.define('MyStore', {
  // extend: 'Ext.data.BufferedStore',
  extend: 'Ext.data.Store',
  model  : 'MyModel',

  remoteSort: true,
  buffered: true,
  leadingBufferZone: 10,
  trailingBufferZone: 10,
  pageSize: 100,

  proxy: {
    type  : 'rest',
    format: 'json',
    url   : '/myApp/list',
    extraParams: {
      fromDate: '',
      toDate: ''
    },
    reader: {
      type: 'json',
      rootProperty: 'data',
      totalProperty: 'totalCount'
    }
  }
});

My Grid looks as follows-->

Ext.define('MyGridl', {
    extend: 'Ext.grid.Panel',
    requires: [
    'MyStore'
    ],
    layout: 'fit',
    loadMask: true,
    viewConfig: {
       preserveScrollOnRefresh: true
   },          
   initComponent: function() {
    this.id = 'myGrid';
    this.store = new MyStore();
    this.callParent(arguments);
},
overflowY: 'auto',
frame: true,
columns: [{
    xtype: 'rownumberer',
    width: 50,
    sortable: false
},{
    text: 'Column1',
    dataIndex: 'Col1',
    flex: 1
},{
    text: 'Column2',
    dataIndex: 'Col2',
    flex: 1
}
],
plugins: [
{
    ptype: 'bufferedrenderer',
    trailingBufferZone: 10,
    leadingBufferZone: 10,
    scrollToLoadBuffer: 10
}
],  
tbar: {
    items: [{
        xtype      : 'datefield',
        id         : 'fromDate',
        emptyText: 'Enter From Date',
        listeners : {
            render : function(datefield) {
                datefield.setValue(Ext.Date.add(new Date(), Ext.Date.DAY, -5));
            }
        }
    },{
        xtype      : 'datefield',
        id         : 'toDate',
        emptyText: 'Enter To Date',
        listeners : {
            render : function(datefield) {
                datefield.setValue(new Date());
            }
        }
    },{
        xtype: 'button',
        text: 'Filter by Date',                                    
        style: {
            marginLeft: '15px'
        },
        scope: this,
        handler: function(me){      
            var store = Ext.getStore('myStore'),
            fromDay = me.up().down('#fromDate').getValue(),
            toDay = me.up().down('#toDate').getValue();

            store.removeAll();
            store.load({
                params:{
                    fromDate: fromDay,
                    toDate: toDay
                } 
            });   
        }                 

    }                       
    ]
}
});

Answer 1

I fixed this issue by adding

store.removeAll();
                    store.currentPage = 1;
                    store.getProxy().setExtraParam("fromDate", fromDay);
                    store.getProxy().setExtraParam("toDate", toDay);
                    store.load();