ExtJS 4.1 Infinite Grid Scrolling doesnt work with Dynamic store using loadData

Question

I have to load first grid panel on tab and then load data into store using loadData() function which is working fine, but now I have to integrate infinite grid scrolling with it.

Is there any way to integrate infinite scrolling on fly after loadData into store..? I am using ExtJS 4.1. Please help me out. Here I am showing my current script in controller and grip view panel in which I have tried out but not working.

Controller Script as below:

var c = this.getApplication().getController('Main'),
    data = c.generateReportGridConfiguration(response,true),
    tabParams = {
        title: 'Generated Report', 
        closable: true, 
        iconCls: 'view', 
        widget: 'generatedReportGrid', 
        layout: 'fit', 
        gridConfig: data
    },
    generatedReportGrid = this.addTab(tabParams);

generatedReportGrid.getStore().loadData(data.data);

On Above script, once I get Ajax call response, adding grid panel with tabParams and passed data with gridConfig param which will be set fields and columns for grid and then last statement supply grid data to grid. I have tried out grid panel settings by following reference example: http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.html

On above page, Included script => http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/infinite-scroll.js

My Grid Panel Script as below:

    Ext.define('ReportsBuilder.view.GeneratedReportGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.generatedReportGrid',
     requires: [
        'ReportsBuilder.view.GenerateViewToolbar',
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.grid.PagingScroller',
        'Ext.grid.RowNumberer',    
    ],
    initComponent: function() {
         Ext.define('Report', {extend: 'Ext.data.Model', fields: this.gridConfig.fields, idProperty: 'rowid'}); 

         var myStore = Ext.create('Ext.data.Store', {model: 'Report', groupField: 'name',

           // allow the grid to interact with the paging scroller by buffering
              buffered: true,
              pageSize: 100,
              autoSync: true,
              extraParams: { total: 50000 },
              purgePageCount: 0,
              proxy: { 
                  type: 'ajax',
                  data: {},
                  extraParams: {
                       total: 50000
                  },
                  reader: {
                      root: 'data',
                      totalProperty: 'totalCount'
                  },
                 // sends single sort as multi parameter
                 simpleSortMode: true
              }
         });   
       Ext.apply(this, {
                dockedItems: [
                    {xtype: 'generateviewToolbar'}
                ],
                store: myStore,
                width:700,
                height:500,
                scroll: 'vertical',
                loadMask: true,
                verticalScroller:'paginggridscroller',
                invalidateScrollerOnRefresh: false,
                viewConfig: {
                    trackOver: false,
                    emptyText: [
                        '<div class="empty-workspace-bg">',
                        '<div class="empty-workspace-vertical-block-message">There are no results for provided conditions</div>',
                        '<div class="empty-workspace-vertical-block-message-helper"></div>',
                        '</div>'
                    ].join('')
                },
                columns:  this.gridConfig.columns,
                features: [
                    {ftype: 'groupingsummary', groupHeaderTpl: '{name} ({rows.length} Record{[values.rows.length > 1 ? "s" : ""]})', enableGroupingMenu: false}
                ],
                renderTo: Ext.getBody()
        });
     // trigger the data store load
     myStore.guaranteeRange(0, 99); 
     this.callParent(arguments);
   }
});

I have also handled start and limit from server side query but it will not sending ajax request on scroll just fired at once because pageSize property in grid is 100 and guaranteeRange function call params are 0,99 if i will increased 0,299 then it will be fired three ajax call at once (0,100), (100,200) and (200,300) but showing data on grid for first ajax call only and not fired on vertical scrolling.

As, I am new learner on ExtJs, so please help me out... Thanks a lot..in advanced.

Trapezius

From my experience buffered scrolling (among other things ;)) in 4.0.0, 4.0.2a, 4.0.7 and 4.1, were all implemented poorly and have many bugs. Up until 4.0.7 a class that was required to get infinite scrolling to work had no class documentation at all. This may help: sencha.com/forum/…. Ext had 4 chances to get scrolling right and they didn't so we ended up writing our own that is more flexible and works with views, our custom components as well as grids. – Shrivel

Are you using filters? – Tripody

Did you ever get this resolved? it would be good to get it marked as finished as its been open a long time now – Eradicate

How does your backend look like? – Trembly

Answer 1

You cannot call store.loadData with a remote/buffered store and grid implementation and expect the grid to reflect this new data.

Instead, you must call store.load.

Example 1, buffered store using store.load

This example shows the store.on("load") event firing.

http://codepen.io/anon/pen/XJeNQe?editors=001

;(function(Ext) {
  Ext.onReady(function() {
    console.log("Ext.onReady")

    var store = Ext.create("Ext.data.Store", {
      fields: ["id", "name"]
      ,buffered: true
      ,pageSize: 100
      ,proxy: {
        type: 'rest'
        ,url: '/anon/pen/azLBeY.js'
        reader: {
          type: 'json'
        }
      }
    })
    store.on("load", function(component, records) {
      console.log("store.load")
      console.log("records:")
      console.log(records)
    })

    var grid = new Ext.create("Ext.grid.Panel", {
      requires: ['Ext.grid.plugin.BufferedRenderer']
      ,plugins: {
        ptype: 'bufferedrenderer'
      }
      ,title: "people"
      ,height: 200
      ,loadMask: true
      ,store: store
      ,columns: [
        {text: "id", dataIndex: "id"}
        ,{text: "name", dataIndex: "name"}
      ]
    })
    grid.on("afterrender", function(component) {
      console.log("grid.afterrender")
    })
    grid.render(Ext.getBody())    

    store.load()
  })
})(Ext)

Example 2, static store using store.loadData

You can see from this example that the store.on("load") event never fires.

http://codepen.io/anon/pen/XJeNQe?editors=001

;(function(Ext) {
  Ext.onReady(function() {
    console.log("Ext.onReady")

    var store = Ext.create("Ext.data.Store", {
      fields: ["id", "name"]
      ,proxy: {
        type: 'rest'
        ,reader: {
          type: 'json'
        }
      }
    })
    store.on("load", function(component, records) {
      console.log("store.load")
      console.log("records:")
      console.log(records)
    })

    var grid = new Ext.create("Ext.grid.Panel", {
      title: "people"
      ,height: 200
      ,store: store
      ,loadMask: true
      ,columns: [
        {text: "id", dataIndex: "id"}
        ,{text: "name", dataIndex: "name"}
      ]
    })
    grid.on("afterrender", function(component) {
      console.log("grid.afterrender")
    })
    grid.render(Ext.getBody())

    var data = [
      {'id': 1, 'name': 'Vinnie'}
      ,{'id': 2, 'name': 'Johna'}
      ,{'id': 3, 'name': 'Jere'}
      ,{'id': 4, 'name': 'Magdalena'}
      ,{'id': 5, 'name': 'Euna'}
      ,{'id': 6, 'name': 'Mikki'}
      ,{'id': 7, 'name': 'Obdulia'}
      ,{'id': 8, 'name': 'Elvina'}
      ,{'id': 9, 'name': 'Dick'}
      ,{'id': 10, 'name': 'Beverly'}
    ]

    store.loadData(data)
  })
})(Ext)

Personalty