set div's innerHTML with an iframe, shows up in firebug but not on page

Question

I'm using the extjs library. I've got a blank panel and I want to load another one of my ext projects into it with an iframe. Here is my function (called from a button), "thepanel" is my blank panel.

function(button){
    var div = document.getElementById('thepanel');
    div.innerHTML = "<iframe src=\"../../../project2/?&type=grades&gradeitem1=40691&\"></iframe>";
}

I can see the GET request in firebug's console when I run the function and all my second project code/data all shows up in an iframe when I look a the HTML in firebug but nothing new shows up in the browser. Any ideas of what could be keeping my iframe's contents from showing

I am using MVC architecture, here is the code that declares my panel:

items:[{
        xtype:'panel',
        itemId:'two',
        id:'thepanel',
        region:'center',
}]

UPDATE: I've tried moving the iframe to the html config option of the panel instead of adding it through jquery with a button click. Again, I can see the code from the url in the iframe show up in firebug but nothing shows up in my application. Here is the code declaring my panel:

xtype:'panel',
itemId:'two',
id:'thepanel',
region:'center',
html:'<iframe src=\"../../../extjproh2/?&type=grades&gradeitem1=40691\"></iframe>',
height:400,
width:400,

Answer 1

Ended up using this plugin from the sencha forums: http://www.sencha.com/forum/showthread.php?110311-iframePanel&p=943573#post943573