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

我搜索但未找到任何滚动侦听器或移动滚动到anty特定位置。没有帮助是值得的。谢谢

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

Answer 2

这是小提琴。如果您有任何问题，请告诉我。

Synchronize Two Grid with Scroll

Answer 3

这似乎是一个老帖子，但我想分享我的部分答案。看，当添加同步滚动条时，问题是鼠标滚轮滚动有点慢。请参阅此fiddle。

所以，我提出的是为事件添加延迟：

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

panelOne.body.on('scroll', function(e) {
    panelTwo.body.dom.scrollTop = panelOne.body.getScrollTop();
}, panelOne.body, {delay: 50 }); //delay 50 seems to fine to me. adjust if you must

Extjs并行滚动两个面板

3 个答案: