Extjs滚动条自动向下滚动，阻止我滚动到顶部

Question

我的网格面板的滚动条有问题。当我滚动到底部并尝试再次向上滚动时，滚动条会自动向下滚动，阻止我滚动到列表顶部。

我尝试将布局设置为“适合”，或者为面板指定一定的宽度和高度尺寸，但这些解决方案都不起作用。

这是我的代码：

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'
    }
});

我该如何修复它？

我做了一些调试，问题似乎与

plugins: {...}

有关

Answer 1

我想我找到了问题和解决方案：问题与网格面板中存在的扩展行功能有关。

问题中提到的

plugins: {...}

实际上管理了这个功能（子表），但我不知道其中的代码的哪一部分产生了问题以及为什么。

通过更深入的研究，我发现扩展行会导致滚动问题。

参考资料：

• 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

解决此问题的唯一方法是将 bufferedRenderer 和 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'
    ],

    ...

Answer 2

我已经能够通过以下覆盖（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
        }
    }
});