Using an iframe as a container for a gridPanel

[jd_porter]

I'm trying to use an iframe in an effort to speed up DOM traversal when creating the grid.

The code I have looks like this:

var iframe = Ext.DomHelper.append(document.body, {tag:'iframe', name:'gridIframe', id:'gridIframe'});
var gridContainer = Ext.DomHelper.append (iframe, {tag:'div', id:'gridContainer'});
var grid = new Ext.grid.EditorGrid(gridContainer, {ds: ds,cm: cm});
and the iframe and gridContainer creation work ok, but when it comes time to make the grid, I get the following error:

this.container has no properties
[Break on this error] this.container.update("");
ext-all-debug.js (line 23100)
this.container has no properties
That line in ext-all-debug is
this.container = Ext.get(container);
this.container.update("");
using firebug to peek around, the container variable is "<div id="gridContainer"><>/div>". shouldn't it be the name of the container instead?

I've tried using the iframe directly, and got a similar error. Is what I'm doing possible?

[tryanDLS]

Your 2nd append returns HTML, not the ID which needs to be passed to the grid CTOR.

[jd_porter]

Well, it's a nice thought. I changed the second append to

var grid = new Ext.grid.EditorGrid('gridContainer', {ds: ds,cm: cm});
which yields the exact same error.

Maybe it needs to be something like this?
var grid = new Ext.grid.EditorGrid(Ext.get('gridContainer'), {ds: ds,cm: cm});
No, same error. Firebug says that this.container (in ext-all-debug) is undefined. Is it having problems seeing the container because of the iframe?


var grid = new Ext.grid.EditorGrid('gridIframe', {ds: ds,cm: cm});
yields a different error:



prototype.js (line 866)
this.scroller.dom has no properties
refresh(undefined)ext-all-debug.js (line 24370)
onDataChange()ext-all-debug.js (line 23707)
fire()ext-all-debug.js (line 1418)
fireEvent()ext-all-debug.js (line 1226)
loadRecords(Object records=[11] totalRecords=11, Object, true)ext-all-debug.js (line 9481)
loadResponse(Object params=Object request=Object reader=Object, true, Object)ext-all-debug.js (line 9877)
handleResponse(Object)ext-all-debug.js (line 9687)
getViewWidth(XMLHttpRequest)ext-prototype-ada... (line 11)
respondToReadyState(4)prototype.js (line 933)
onStateChange()prototype.js (line 881)
bind()prototype.js (line 71)
[Break on this error] this.scrollSizer = new E(this.scroller.dom.firstChild);
ext-all-debug.js (line 23794)



I have no idea how to interpret this.