Extjs Scroll bar automatically scroll down preventing me from scrolling to the top

I have a problem with the scrollbar of my grid panel. When I scroll to the bottom and I try to scroll up again at one point the scroll bar automatically scroll down preventing me from scrolling to the top of the list.

I tried to set the layout 'fit', or give to the panel a certain width and height size, but nothing of this solutions work.

This is my code:

Ext.define('MyApp.view.List', {
    extend: 'Ext.grid.Panel',
    xtype: 'listView',

    requires: [
        'Traccar.view.ListController',
        'Ext.ux.grid.SubTable'
    ],

    controller: 'list',
    store : 'MyStore',
    layout: 'fit',
    autoscroll:false,

    id: 'listId',
    tbar: {
        componentCls: 'toolbar-header-style',
        defaults: {
            xtype: 'button',
            disabled: true,
            tooltipType: 'title'
        },
        items: [{
            xtype: 'tbtext',
            html: 'List',
            baseCls: 'x-panel-header-title-default'
        }, {
            xtype: 'tbfill',
            disabled: false
        }, {
            xtype: 'settingsMenu',
            reference: 'settingsMenu',
            disabled: false,
            enableToggle: false
        }]
    },
    columns: {
        items: [{
            text: Strings.sharedName,
            dataIndex: 'name',
            filter: 'string',
            flex: 1
        },{
            text: 'Devices',
            flex: 0.2,
            renderer: function(a,b,record){
                    var bla = Ext.Array.filter(
                         Ext.getStore('Devices').data.items,
                         function(r) { return r.get('activeItemFromStore').includes(record.get('id'));}
                    );
                    return bla.length;
            }
        }]
    },
    viewConfig: {
        listeners: {
            expandbody: 'onExpandbody',
            collapsebody: 'onCollapsebody',
        },
        getRowClass: function(record, rowIndex, p, store) {
            if (record.getData().attributes.color) {
                //return 'bigHeader centerlist-row-' + record.getData().attributes.color.replace('#','')
                return 'centerlist-row-' + record.getData().attributes.color.replace('#','')
            }else{
                //return 'bigHeader centerlist-row-default';
                return 'centerlist-row-default';
            }
        }
    },

    plugins: {
     ptype: 'subtable',
     association: 'devices',
     expandOnDblClick: false,
     headerWidth: 28,
     hideHeaders: true,
     //rowBodyTpl: ['<table class="bigFont ' + Ext.baseCSSPrefix + 'grid-subtable"',
     rowBodyTpl: ['<table class="' + Ext.baseCSSPrefix + 'grid-subtable"',
             '{%',
                 'this.owner.renderTable(out, values);',
             '%}',
             '</tbody></table>'
     ],
     columns: [
     {
         flex: 1,
         text: Strings.sharedName,
         dataIndex: 'name'
     },{
          text: Strings.deviceLastUpdate,
          dataIndex: 'lastUpdate',
          type: 'date',
          renderer: Ext.util.Format.dateRenderer('d.m.Y H:i:s')
       },{
        text: Strings.sendMessage,
        dataIndex: 'attributes.message'
     }],

     getAssociatedRecords: function(record) {
         return Ext.Array.filter(
                     Ext.getStore('Devices').data.items,
                     function(r) { return r.get('activeItemFromStore').includes(record.get('id'));}
         );
     },
     renderTable: function(out, rowValues) {
             var me = this,
                 columns = me.columns,
                 numColumns = columns.length,
                 associatedRecords = me.getAssociatedRecords(rowValues.record),
                 recCount = associatedRecords.length,
                 rec, column, i, j, value;

             out.push('><tbody><thead>');
             for (j = 0; j < numColumns; j++) {
                 out.push('<th class="' + Ext.baseCSSPrefix + 'grid-subtable-header">', columns[j].text || columns[j].dataIndex, '</th>');
             }
             out.push('</thead>');
             if ( associatedRecords.length > 1){
                 associatedRecords = associatedRecords.descSortBy(function(o){ return o.data.lastUpdate });
             }

             for (i = 0; i < recCount; i++) {
                 rec = associatedRecords[i];
                 out.push('<tr>');
                 for (j = 0; j < numColumns; j++) {
                     column = columns[j];

                     // attributes as dataindex
                     if ( column.dataIndex.includes(".")){
                        var a = column.dataIndex.split(".");
                        value = rec.get(a[0])[a[1]]
                     }else{
                       value = rec.get(column.dataIndex);
                     }

                     if (column.renderer && column.renderer.call) {
                         value = column.renderer.call(column.scope || me, value, {}, rec);
                     }
                     //out.push('<td class="bigFont ' + Ext.baseCSSPrefix + 'grid-subtable-cell"');
                     out.push('<td class="' + Ext.baseCSSPrefix + 'grid-subtable-cell"');
                     if (column.width != null) {
                         out.push(' style="width:' + column.width + 'px"');
                     }
                    out.push('><div class="' + Ext.baseCSSPrefix + 'grid-cell-inner">', value, '</div></td>');
                 }
                 out.push('</tr>');
             }

         }
    },
    listeners: {
          rowdblclick: 'onEnterMessageWindow'
    }
});

How can I fix it?

I made some debugging and the problem seems to be related to the plugins: {...}

Solution

I think I found the problem and the solution: the problem is related to the expanding row feature present in my grid panel.

The plugins: {...} mentioned in the question, in fact, managed this functionality (subtable) but I didn't know exactly which part of the code inside it generates the problem and why.

By making more deep research, I found out that expanding row causes scroll issues.

references:

The only way to fix this problem so is to set bufferedRenderer and runInViewport to false:

Ext.define('MyApp.view.List', {
    extend: 'Ext.grid.Panel',
    xtype: 'listView',

    bufferedRenderer: false,
    runInViewport: false,


    requires: [
        'Traccar.view.ListController',
        'Ext.ux.grid.SubTable'
    ],

    ...