How can I synchronize horizontal scrolling of two grids?

Checking the docs I wasn't able to find a "scroll" event to listen to.

Code:
grid1.view.getEl().on('scroll',function(e, t){
    grid2.view.getEl().dom.scrollTop = t.scrollTop;
});
grid2.view.getEl().on('scroll',function(e, t){
    grid1.view.getEl().dom.scrollTop = t.scrollTop;
});
JS Fiddle of above.

This would work I believe substituting dom.scrollTop for dom.scrollRight (or left?) if I would write the code inside of the view or have it handled through the view controller in some fashion. But there I don't know what event would be trapped in order to accomplish this with Sencha Architect.

The purpose of this is to allow a user to upload a file, I return a sample of the data in the bottom grid with the column headers being the name of the columns in the .csv file. The top grid is only headers with the database column fields. The user would then drag and drop in grid two to align with the headings in grid one to "map" where their columns should it in the database table.. Right now it looks good on paper, but I need to control the horizontal scroll on the top grid based on the scroll of the bottom grid. The top grid is non-scrollable.

Any pointers how to accomplish this?