javascript - Extjs 并行滚动两个面板

Question

我有两个面板，并且都有 autoScroll: true。我希望它们平行滚动；也就是说，滚动一个，另一个也应该自动滚动。我的代码:

Ext.define('CompareDailog', {

    extend      : 'Ext.window.Window',
    width       : '100%',
    height      : '100%',
    resizable   : true,
    closeAction : 'destroy',
    editMode    : false,
    padding     : '1 1 1 1',

    layout      : {
        type        : 'border',
        align       : 'left',
        padding     : '5 5 5 5'
    },

    items       : [{
        xtype       : 'panel',
        id          : 'originalDocument',
        title       : 'Original Document',
        width       : '50%',
        height      : '100%',
        region      : 'west',
        autoScroll  : true
    }, {
        xtype       : 'panel',
        id          : 'modifiedDocument',
        title       : 'Modified Document',
        width       : '50%',
        height      : '100%',
        region      : 'east',
        autoScroll  : true
    }],

    buttons     : [{
        text        : 'Cancel',
        handler     : function() {
            this.up('window').close();
            return;
        }
    }]
});

我搜索但没有找到任何滚动监听器或将滚动移动到任何特定位置。不，帮助是可观的。谢谢

Answer 1

这是 Ext.Panel 组件的另一个方面。基本上，您可以通过 body.dom 属性设置元素的滚动条位置。

ExtJS - Synchronize Two Panel Scrollbars

var panelOne = Ext.getCmp('originalDocument');
var panelTwo = Ext.getCmp('modifiedDocument');

panelOne.body.on('scroll', function(e) {
    panelTwo.body.dom.scrollTop = panelOne.body.getScrollTop();
})