Calculating the scrollbar height of an iFrame (Ext JS 4.x)

First you need to get the DOM element of the iFrame,  so assuming you have an iframe like ths following:

var panel = Ext.create('Ext.form.Panel', {
 title: 'I am a Panel',
 layout: {
 align: 'center',
 type: 'vbox'
 },
 flex: 1,
        html: '<iframe id="reportframe" width="100%" src="http://localhost/foo.html"></iframe>',
});

You would get the iframe by doing this:

var iframe = document.getElementById('reportframe');

Getting the height though is more tricky business, because the actual height is not available until after the content is loaded into the iframe. Just listen for the onload event right, no. Even after the onload event the height is still not correct if you attempt to get it through the style element. As far as I can tell the height is available at some seemingly arbitrary point after onload.
This is how you calculate the height of the scrollbar at that arbitrary point after onload:

var scrollHeight =
 iframe.contentWindow.document.body.scrollHeight -
 iframe.style.height.replace("px", "");

The “scroll height” in this content is the actual height of what the scroll bar can be moved to accommodate. For example if the height was 100, that would mean 0 through 100 would be points at the scroll bar from 0 at the top to 100 at the bottom.

For example you could scroll halfway down the page by doing the following:

iframe.contentWindow.scrollTo(0,scrollHeight/2);