Displaying an iFrame at 100% height and width in a dynamic Panel (Ext JS 4.x)

This ended up being pretty tricky. As it turns out you can use the html width attribute for the iFrame tag to set its width to 100%, however this won’t work for the height. For the height you have to set that manually, which you can do by retrieving the iframe element within the page DOM and settings its height to its parent.

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>',
});

// add the panel to some container
myContainer.add(panel);
myContainer.doLayout();

// size the iframe's height based on whatever the height is for its the DOM parent    
var iframe = document.getElementById('reportframe');
iframe.style.height = iframe.parentNode.style.height;