How to make extjs container scroll during drag and drop actions

See more:

ExtJS

I have a an ExtJS project where we have a container that has a number of child panels and to which the user can add as many panels as they like. The user is allowed to re-order these panels using drag and drop. When there are more panels than the container can render in the UI it obviously gets a scroll bar. I'm trying to make it so the user can drag to the limit of the container's visible UI and at that point have the container scroll to allow the user to see where they drop the panel. See fiddle: Sencha Fiddle[^]

What I have tried:

I added an Ext.dd.ScrollManager with a reference to the container's domain element, but it doesn't seem to get the correct dragIndex - it seems to be unaware that the container has scrolled.
I have tried the container's/panel's own simple drag and drop - same issue. The code in the fiddle is a bit more complex due to the need to apply the sort the underlying store etc. I made the fiddle a close but simplified resemblance of the actual application. I have looked at the API documentation for help, but detail on the ScrollManager seems sparse.