Control Scroll Bar

[neeuq]

Hi there,

I'm using a Grid panel and on the right side of it I'm using a content panel (with an image,although that's not important). Something like Microsoft Project look and feel...

But each panel has a scroll bar. What I want is some way that I can control the other panel's scroll bar so the grid on the left is in line of the respective part of the image on the right.

Other possibility could be the use of just one scroll bar of course...

Can anyone help me on that?


Thanks in advance.

Cheers,

Francisco Veiga

[Animal]

Where rightEl is an Ext.Element:


rightEl.on("scroll", function(){leftEl.dom.scrollTop = rightEl.dom.scrollTop});

[Animal]

If they have different scrollHeights, then you'll have to use a bit of arithmetic so that they scroll proportionately, possibly:


rightEl.on("scroll", function(){
var rightScrollMax = rightEl.dom.scrollHeight - rightEl.dom.clientHeight;
var leftScrollMax = leftEl.dom.scrollHeight - leftEl.dom.clientHeight;
var f = rightEl.dom.scrollTop / scrollMax;
leftEl.dom.scrollTop = leftScrollMax * f;
});

[neeuq]

thanks!! ;)

I'll try it :)


Francisco Veiga

[neeuq]

Hi there.

I'm not getting it :).

I've used something like this:

var grid = new Ext.grid.DDGrid('editor-grid', {
ds: ds,
cm: cm,
autoSizeColumns: false,
autoSizeHeaders: true,
enableColLock:true,
selModel: new Ext.grid.RowSelectionModel(),
trackMouseOver: true


});

....

var ganttCP = new Ext.ContentPanel('rightpanel', {title: '<bean:message key="projects.gantt.plan"/>', fitToFrame:true, closable:false});

.....

var rightEl = grid; // left grid

var leftEl = ganttCP; // right content pane with the image

rightEl.on("scroll", function(){leftEl.dom.scrollTop = rightEl.dom.scrollTop});


what might be happening? and how that "scroll" works..? :)


thanks in advance.

Cheers,

Francisco Veiga

[neeuq]

The event itself is not working..

I've tried:
rightEl.on("scroll", function(){alert("test")});

but the alert never shows up when I move the scroll bar.

I might had not be clear in my objective: Everytime I move the scroll bar on the left grid I want the right content panel to move the same way (and vice-versa of course).

Cheers,

Francisco Veiga

[Animal]

"scroll" is an event of an Element, not a widget.

if it so happens that you want to react to scroll events ion a Grid;s body: http://extjs.com/deploy/ext/docs/output/Ext.grid.Grid.html#event-bodyscroll

scrollTop is a property of ther underlying DOM element.