Extjs scroll two panels in parallel

Question

I have two panel and both have autoScroll: true. I want them to scroll in parallel; that is, scroll one, the other should automatically scroll as well. My Code:

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

I search but not found any scroll listener or move scroll to anty specific position. nay help is appreciable. Thanks

I haven't tried this myself but it looks like you need to use the scrollBy method. [link](http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.Panel-method-scrollBy) You could make a function to pass the other grid panel the scroll coordinates and it would have this appearance. Look here for an example of passing a scroll bar coordinance: [link](http://stackoverflow.com/questions/9010108/extjs-4-0-7-scrollto-scrolls-but-doesnt-move-scroll-bar-slider) — JesseRules, Apr 11 '14 at 12:57

Oğuz Çelikdemir · Accepted Answer · 2014-04-14T07:41:24.690

4

Here is the another aspect for Ext.Panel component. Basically, you can set scrollbar position of an element by body.dom property.

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

edited Apr 14 '14 at 07:41

answered Apr 14 '14 at 07:00

Oğuz Çelikdemir

4,990
4
30
56

score 2 · Answer 2 · answered Apr 11 '14 at 13:58

2

Here is fiddle. If you have any problem, let me know.

Synchronize Two Grid with Scroll

answered Apr 11 '14 at 13:58

Oğuz Çelikdemir

4,990
4
30
56

The logic is mostly the same. Modify it a bit. – Evan Trimboli Apr 14 '14 at 07:26

score 0 · Answer 3 · answered Apr 05 '17 at 09:44

This seems an old post but I want to share my part of answer. See, when adding synching scrollbars, problem is the mousewheel scrolling is somewhat slow. See this fiddle.

So, what I've come up with is to add a delay to the event:

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 scroll two panels in parallel

3 Answers3