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: {...}

我做了一些调试，问题似乎与插件有关：{...}

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:

参考文献：

• https://fiddle.sencha.com/#view/editor&fiddle/286b


• https://forum.sencha.com/forum/showthread.php?286536-Expanding-row-causes-scroll-issues-on-tablet&p=1047739&viewfull=1


• https://forum.sencha.com/forum/showthread.php?466458-Grid-vertical-scroll-bar-problem-during-expand-collapse-of-a-node

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

解决此问题的唯一方法是将BufferedRenender和runInViewport设置为FALSE：

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

    bufferedRenderer: false,
    runInViewport: false,


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

    ...

On my end it was caused by

在我这方面，它是由

hideHeaders: true

I turned it off and removed the column texts to reproduce the same looking and the bug vanished

我关掉了它，删除了专栏文本以重现相同的外观，这个错误就消失了

I have been able to fix this issue on my side with the following override (ExtJS 6.2.2), see the added line on the bottom:

我已经能够通过以下覆盖(ExtJS 6.2.2)修复这个问题，请参见底部添加的行：

Ext.override(Ext.grid.plugin.BufferedRenderer, {
    refreshScroller: function(view, scrollRange) {
        var scroller = view.getScrollable();
        if (scroller) {
            // Ensure the scroller viewport element size is up to date if it needs to be told (touch scroller)
            if (scroller.setElementSize) {
                scroller.setElementSize();
            }
            // Ensure the scroller knows about content size
            scroller.setSize({
                x: view.headerCt.getTableWidth(),
                y: scrollRange
            });
            // In a locking assembly, stretch the yScroller
            if (view.lockingPartner) {
                this.scroller.setSize({
                    x: 0,
                    y: scrollRange
                });
            }
            
            scroller.scrollTo(null, this.scrollTop); // added
        }
    }
});