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
                } 
            });   
        }                 

    }                       
    ]
}
});

Adding a total count on the backend resolved my issue for loading further records. But when the 2nd page loads, I cannot send the extra parameters to the backend. How can i resolve this? — KavitaC

KavitaC KavitaC · Accepted Answer · 2015-10-06T20:09:27

I fixed this issue by adding

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

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

1 Answers