[转]GWT-Ext – Synchronized Scrolling of Grids

I recently had a requirement wherein two grids showing similar information needed synchronized scrolling i.e. if the left grid was scrolled down vertically, the right grid also needed to be scrolled down in the same proportion and vice-versa.

This feature comes in very handy when the user has to compare the changed values across the two grids. Consider the use case of a user viewing his stock portfolio and wants to track the prices of his investments on two different dates.

The screenshot below explains the scenario:

In this scenario, we only need to the vertical scroll to be synchronized. However, if there is a horizontal scrollbar present, the horizontal scrolling would also be synchronized.

To implement synchronized scrolling follow the steps below:

1. Declare and initialize the grids:

//Create the right grid
final GridPanel rightGrid = new GridPanel();

//Create the left grid
final GridPanel leftGrid = new GridPanel();

2. Initialize two GridViews and attach them to the respective grids

//Right GridView
GridView gridViewRight = new GridView();
rightGrid.setView(gridViewRight);

//Left GridView
GridView gridViewLeft = new GridView();
leftGrid.setView(gridViewLeft);

3. Set other regular Grid properties like Column Model, Store etc.

4. Add a GridListener to each of the Grids. We only need to implement the onBodyScroll(int scrollLeft, int scrollTop) method of the listener so we will use GridListenerAdapter instead.

The GridView class provides a method
scrollToPosition(int horizontalPosition, int verticalPosition)
which scrolls the Grid scroll-bar to the specified position.
If the grid needs to be scrolled in only one of the direction, then pass the other position value as -1.

//Add a GridListener for the right grid that will
//scroll the left grid scroll bars when the right grid is scrolled.

rightGrid.addGridListener(new GridListenerAdapter(){
public void onBodyScroll(int scrollLeft, int scrollTop) {

//if the right grid scroll bar is moved,
//the left grid scroll bar needs to be moved proportionately

gridViewLeft.scrollToPosition(scrollLeft, scrollTop);
//gridViewLeft.scrollToPosition(-1, scrollTop);
}
});

//Add a GridListener for the left grid that will
//scroll the right scroll bars this grid is scrolled

leftGrid.addGridListener(new GridListenerAdapter(){
public void onBodyScroll(int scrollLeft, int scrollTop) {

//if the left grid scroll bar is moved,
//the right grid scroll bar needs to be moved proportionately

gridViewRight.scrollToPosition(scrollLeft, scrollTop);
//gridViewRight.scrollToPosition(-1, scrollTop);
}
});

That’s it! Now, whenever either of the grids is scrolled up or down, the other grid scroll bar would automatically adjust itself at the same position.

If you want only vertical scrolling to be synchronized, then comment the two lines and uncomment the commented lines in the listener code above.
[url]
http://jaydeepm.wordpress.com/2009/08/05/gwt-ext-synchronized-scrolling-of-grids/[/url]