parallax background

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

Digital Transformation Group LinkedIn
Resetting the selection in a combobox (Ext JS 4.x)
April 26, 2012
Digital Transformation Group LinkedIn
Writing an asynchronous task that takes a parameter (Ext JS 4.x)
April 30, 2012

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

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


I live and work in the Dallas/Fort Worth area as a Principal Consultant for AppFoundation. I have been working with Java since 2000, Flex since it was in beta release, iOS development since 2008, and Sencha and Ext JS 4 since 2012. I have a Bachelor of Music with a double major in Music Performance and Music Composition, and a Bachelor of Science in Computer Information Science from Texas Christian University. I also have a Master of Science in Software Engineering from Southern Methodist University. I specialize in enterprise development, architecture, design, and continuous integration practices.

1 Comment

  1. safalk says:

    Hi jvalentino,

    Above example is very helpfull to me however I’m facing issue here. I’ve panel and grid on the Extjs screen. On clicking on one column inside grid dynamically I’m opening above panel(having iframe ) inside the panel on the screen. The issue I’ve have is after saving the data inside the iframe I want to handle events of the iframe on the screen so that I can refresh the screen to reflect the changes onside the grid. I’ve call back jsp on saving of the iframe but I’m not able to capture the extjs function here in jsp so that I can collaspe this panel and refresh the screen.

    Could you please provide me some assistence to resolve this issue ?