PDA

View Full Version : Call namespaced function inside iframe.



Michel_B
27 Mar 2012, 9:05 AM
Hello,

I have a custom component that contains an iframe. Inside this iframe, I load a js file that defines a namespace and within that some classes and objects.

What I am trying to do is call one of the functions inside my 'iframed' namespace from the top window.
I can get a reference to the iframe, the iframe's dom element and so forth, but I can't 'see' my namespace, let alone point to anything inside it. I am 100% certain the namespace is initialized inside the iframe. How can I do this?

Hope this is clear and that anyone can help.

Thanks,
Michel

PS A little schematics to illustrate my setup:

window
-- some_script.js // <-wants to call functions inside iframe>namespace.js
-- iframe
-- -- namespaced.js // <- defines namespace and functions inside it.

mitchellsimoens
27 Mar 2012, 10:54 AM
Is the namespace on the window variable in the iframe?

Michel_B
27 Mar 2012, 11:14 AM
The namespace is defined with

Ext.ns('mynamespace')

Not sure where it gets defined, but window.frames[1].mynamespace and window.frames[1].window.mynamespace are both undefined. My Javascript fu is not quite sufficient to be sure if this is what you're asking.

The parent gets an iframe reference like so:
var iframe = Ext.getCmp('my-iframe').el.dom;

Michel_B
29 Mar 2012, 1:55 AM
Sorry I haven't heard form you again, here's an update with an apparent bug report and a new question:

After realizing I was loading the entire ExtJS library twice (once in the parent, once in the frame) I decided to move the whole namespace definition from the frame to the parent and call out to the top from inside the frame. This has succeeded, albeit not without encountering something rather strange with my data store definitions.
I my namespace I define a grid.Panel backed by a data.JsonStore, defined straight from the docs. When I load this functionality in a stripped out page with an iframe and simulate the intended functionality, everything works flawlessly. But in my real app, my JsonStore seems to 'forget' its url and reader configs when I try to load the panel. I need to explicitly set the url on the store.load call and set a proxy.reader in my panel's constructor method to circumvent this, but it seems like a bug to me since the exact same script works fine in a stripped out test version. The main difference between the test app and the real app is that the real app has a data.TreeStore and an TreePanel defined in the parent, but other than that I have no clue.

Anyway, now to my question. My tool is an 'autosuggest' popup that appears whenever someone edits certain content inside the iframe. This is not a form field, but some editable browser content, so I couldn't use combobox for this. Now, I would like to render the panel inside the iframe's body, so it'll scroll with the iframe. Can I do this with renderTo? What do I specify to make it so?