PDA

View Full Version : Synchronizing Panel Scroll Bars



msuresh
5 Nov 2010, 6:32 PM
Hi,
I have a situation where I need to compare two documents line by line using two panels [Ext.Panel] (like finding difference between two versions of code). Whenever the user scrolls one of the panel, the scroll bar of the other panel also should synchronize by moving automatically with the other.

I was looking for an appropriate scroll listener, but nothing works. Can any one point me to the right direction.

Regards,
SURESH M R

wongpat
5 Nov 2010, 7:02 PM
Set a 'scroll' listener on both the Elements on the panels (aka. panel.el), get the underlying DOM and then set the scrollTop of the other panel to the same value as the listener object's scrollTop

msuresh
6 Nov 2010, 9:18 AM
Thanks wongpat. I am trying to alert when the user scrolls, but my alert is not opening. Can u point me where I need to correct the code.



var pnl1 = new Ext.Panel({
title:"Panel1",
id:"pnl1",
html:"<h1>Testing...</h1>",
autoScroll:true,
listeners:{
render:function(p){
p.getEl().on('scroll', function(e){alert("Event " + e)});
},
single: true
},
flex:1,
padding:'5'
});

var pnl2 = new Ext.Panel({
title:"Panel2",
id:"pnl2",
html:"<h1>Testing...</h1>",
autoScroll:true,
listeners:{
render:function(p){
p.getEl().on('scroll', function(e){alert("Event " + e)});
},
single: true
},
flex:1,
padding:'5'
});


This code was taken from another forum post. Even this one is not working.


var p = Ext.getCmp("pnl1").getEl();
var d = Ext.getCmp("pnl2").getEl();
var yOffset = d.getY() - (p.getY() - p.dom.scrollTop);
p.scrollTo("top", yOffset, true);

Animal
6 Nov 2010, 10:10 AM
Why t his thing with alerting? When you scroll there will be hundreds of scroll events pouring out!

Alerting is almost never a method of debugging.

But it shows that you do not debug and investigate independently.

You put the scroll listener on the getEl() element. The outer element of the Panel.

As you would see if you poked it with Firebug and inspected the DOM, that is not what contains the Panel's content. Panel has a body property.

ankurgarg27
11 Sep 2012, 12:58 PM
Hi,

I am trying to do the exact same thing.

I was wondering if you were able to find a solution for the same?

I have my post here : http://www.sencha.com/forum/showthread.php?242212-scroll-two-ext.TabPanels-together&p=885782

t (http://www.sencha.com/forum/showthread.php?242212-scroll-two-ext.TabPanels-together&p=885782)hanks