Render Extjs elements into other frame

Question

I want to render Ext elements in an iframe.

In the page that is loaded into the iframe, I have a div element:

<div id="panel"></div>

When the iframe is loaded, I want to render an Ext panel into this div element.

So the page loaded into the iframe got a function which is executed on load:

console.log(parent.Ext.get("panel"));
console.log(document.getElementById("panel"));
console.log(new parent.Ext.dom.Element(document.getElementById("panel")));
parent.Ext.create('Ext.Panel',{
    layout : 'fit',
    height : 200,
    width : 600,
    autoScroll: false,
    renderTo : new parent.Ext.dom.Element(document.getElementById("panel"))
});

The console messages are as follows:

null VM14143:10
<div id=​"panel">​…​</div>​ VM14143:11
D {el: D, dom: div#panel, id: "panel", $cache: Object, self: function…} VM14143:12
TypeError: Cannot read property 'dom' of null

The TypeError is occuring no matter which of the three console.logs I put into renderTo: renderTo: parent.Ext.get("panel") or renderTo: document.getElementById("panel") or renderTo: new parent.Ext.dom.Element(document.getElementById("panel")), but it does not occur when I remove the renderTo line completely.

Now, how can I render a panel into my div?

Answer 1

What you are trying to do is wrong. Because when you do parent.Ext, it will execute in parent scope than in current scope(which is iframe) So what you need to do is, have ExtJS library loaded in the iframe as well, and execute the code.