Ext version tested: Browser versions tested against: DOCTYPE tested against: Description:

  • store.reload() seems to have no effect on a buffered grid panel. I have tried to cut down the problem as much as possible in code below. Unfortunately I couldn't create a fiddle as the example points at a remote data source.

    The buffered grid works fine in response to scrolling, but not when trying to force a refresh of the data in view. I am trying to refresh the data in the grid periodically as the remote data I am displaying in the grid is changing.


    I have a TaskRunner causing a store.reload() every 10 seconds. I see the ajax call being made out and the new data retrieved, so I guess the data store is being updated with new data, but the grid does not seem to be triggered to display the new data.


    If I replace store.reload() with store.load() the grid is updated, but there is a large amount of flicker because it seems store.load() wipes all the items and re-adds them.




Steps to reproduce the problem: The result that was expected:

  • grid updates on store.reload()


The result that occurs instead:

Code:



     
Ext.application({
    name: 'MyApp',
    launch: function () {   
        Ext.define('Message', {            extend: 'Ext.data.Model',
            fields: ['id', 'date', 'time', 'message']
        });


        var store = Ext.create('Ext.data.Store', {
            model: 'Message',
            buffered: true,
            autoLoad: true,
            pageSize: 40,
            proxy: {
                type: 'ajax',
                url: 'Home/Messages',
                extraParams: {
                    total: 1000
                },
                reader: {
                    type: 'json',
                    root: 'messages',
                    totalProperty: 'total'
                }
            }
        });


       Ext.create('Ext.grid.Panel', {
           store: store,
           plugins: new Ext.grid.plugin.BufferedRenderer({pluginId: 'buff1'}),
           renderTo: Ext.getBody(),
           width: 400,
           height: 400,
           columns: [
               {
                   text: 'Date',
                   width: 100,
                   sortable: false,
                   hideable: false,
                   dataIndex: 'date'
               },
               {
                   text: 'Time',
                   width: 150,
                   sortable: false,
                   dataIndex: 'time'
               },
               {
                   text: 'Message',
                   sortable: false,
                   flex: 1,
                   dataIndex: 'message'
               }
           ]
       });


       var initial = true;
       var task = {
           run: function () {
               if (!initial) {
                   store.reload();
               }
               initial = false;
           }, interval: 10000
       };


       var runner = new Ext.util.TaskRunner();
       runner.start(task);