PDA

View Full Version : open Ext.Window in parent page from iframe


karstenvennemann
12 Sep 2008, 11:06 PM
Ok absolute newbee question:
I am trying to adapt the windows example for my purposes. I have a button in an iframe which triggers a new Ext.Window. So far this work, but the new window is then stuck inside the small iframe instead of showing up on the main page :(( .
After half day trying to get this to work I could need some input...

I added a div with id 'thecontainer" to the main page:
<div id='thecontainer' name='thecontainer' style = 'position:absolute;left:1;top:1;width:1;height:1;z-index:1;' > </div>
in order to get the window to pop-up there and tried to refer to that div using this:
<script>
function showWindow() {
var thebody = parent.document.getElementById('thecontainer');

var win = new Ext.Window(thebody,{
width:100,
height:100,
title:"Ext Window Example",
autoScroll:true,
shadow: true,
shadowOffset: 7,
});
win.show();
}

</script>

But I always get an "Element "thecontainer" doesn't exist." error . I have no idea why.
How can I get the window to display outside my iframe on the main page? Is that possible at all?
Thanks
Karsten
santosh.rajan
13 Sep 2008, 1:27 AM
An iframe is basically an independant page inside your page. So i am not surprised you have this problem. Do you really need an iframe?
[email protected]
13 Sep 2008, 1:37 AM
Ext is expecting the el to be in the frame it's in.
nan21eu
13 Sep 2008, 2:43 AM
Hi

it is said that you cannot access objects in different DOMs [ in your case iframe ] or from javascript which is outside of your Ext.onReady() function.

Try this approach :
<html>
.....
<script>
var myWindow;

function test() {
myWindow.show();
}

setTimout("test()",3000);


Ext.onReady(function(){
....
myWindow = new Ext.Window(.....);
.....
});
</script>
.....
<html>


Let's see what happens:

Load the html, declare the variable outside of Ext.onReady, than initialise it inside.

Give time the browser to perform the onReady function and call the test() function [ with the setTimeout function ] => in 3 seconds your window is opened.

Now if you call from another frame/iframe something like :

self.parent.frames["..."].test(); or whatever is your frame/iframe hierarchy should open that window.

So you define your window in the main page and call it from another frame

I just tested the idea and seems to work, however a deeper analysis should be done to see what happens when destroying objects,etc....

I would appreciate feedbacks/opinions/experiences on this topic

attila