Search code examples
extjsscrollgridscrollbarextjs6

extjs 6 grid scrollbar jumping


I have an extjs 6.0.1.250 grid, with a remote json store, it is loading every 2 seconds, to refresh its data. It shows a device list with the device statuses, about 200 lines. (name, uptime, etc...)

When a user scrolls the scrollbar with the mouse the grid does not keep its position but jumps with to the old place. Is there a solution to use it normally with scrolling?

Using a taskManager:

this.config.pmConfig.deviceRefreshTask =
            {

            run: function()
            {
                var store=this.getDevicesGetDevicesStore();

                store.proxy.setExtraParam('eventDisableLoader', true);
                store.load();

            },
            interval: 2000, // 2 second, this will update the progressbar
            scope: this
        };

        Ext.TaskManager.start(this.config.pmConfig.deviceRefreshTask); // start the first timer

And here is the grid:

xtype: 'gridpanel',
viewConfig: {
    loadMask: false
},
itemId: 'devicesGrid',
width: 40,
title: '``Devices``',
emptyText: '``There is no device in this group.``',
store: 'Devices.GetDevices',
columns: [
    {
        xtype: 'gridcolumn',
        hidden: true,
        width: 80,
        align: 'right',
        dataIndex: 'id',
        text: 'Id'
    },
//....... more normal and some action columns.....
],
viewConfig: {
    itemId: 'devicesGridTableView',
    loadMask: false,
    preserveScrollOnRefresh: true,
    preserveScrollOnReload: true,
    plugins: [
        {
            ptype: 'gridviewdragdrop',
            ddGroup: 'deviceGroups',
            enableDrop: false
        }
    ]
},
tabConfig: {
    xtype: 'tab',
    dock: 'left'
},
features: [
    {
        ftype: 'grouping',
        groupHeaderTpl: [
            '<b>{name}</b>'
        ]
    }
],
selModel: {
    selType: 'checkboxmodel'
}

Solution

  • Arthurs suggestion is helped: "In the grid definition you can try to use bufferedRenderer: false"

    thanks.