PDA

View Full Version : How to create ext widgets with cross window scripting?


dolittle
13 Sep 2007, 2:38 AM
Hi,

I`m using version 1.1.1
I have a parent window that open a child popup window.
The child window contain only markup with no javascript.
I want to create a toolbar in the child window with code at the parent window.
Both of the files are from the same domain and I make sure they are both ready before trying to do anything.

This is my code:



var init = function() {
var childToolBar = childWin.document.getElementById("toolbar");
var childTb = new Ext.Toolbar(childToolBar);

var tb = new Ext.Toolbar("toolbar");
tb.addSeparator();
// Everything is fine at this stage. The child window has a blue strip in the toolbar position
// and the parent window has a blue strip with a separator.

//at this stage IE7 gives me an error
childTb.addSeparator();
}


It works well in FF but IE7 gives me an error when trying to add the separator to the child window :


line:15469
char:9
Error:No such interface supported
Code:0
URL: (the url of my html file)


I realize that what I`m trying to do is not standard but is it posibble?
I can apply ext element to an exisitng markup and attach events to element in the child window but is it posibble to create widgets?

Thanks
Animal
13 Sep 2007, 3:03 AM
You have hit the reason why you can't do it.

Ext.Elements are cached by their id.

You have name collision between "toolbar" in your child window and "toolbar" in your main window.
dolittle
13 Sep 2007, 4:11 AM
You are right.
I changed the IDs of the toolbars of the parent and child windows to pToolbar and cToolbar.
I even commented out the part that creates the parent toolbar to be sure.

Now I get this error in IE7:


line:69
char:2365
Error: No such interface supported
Code:0


I get this error only when I try to add separator to the child window`s toolbar.
If you have any ideas how to test a simpler case I`ll be happy to try anything.
If it`ll help I can post the code and the html pages. It`s very small and just a test to build the toolbar in the child window.

Thanks
Animal
13 Sep 2007, 4:18 AM
Use ext-all-debug.js

Post up a page demonstrating.
dolittle
13 Sep 2007, 4:42 AM
switched to ext-all-debug(1.1.1)

parent window html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Parent</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>

<script type="text/javascript">
var childWin = window.open('childWin.html', 'childWin', 'height=400, width=700');
</script>


<script type="text/javascript" src="test.js"></script>

</head>
<body>

<div id="container">
<div id="toolbar"></div>
</div>

</body>
</html>


child window html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
<title>Child</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style type="text/css">
#cContainer {
width:600px;
height:300px;
border:3px solid #c3daf9;
}

</style>
</head>
<body>
<div id="cContainer">
<div id="cToolbar">old Text</div>
</div>
<script type="text/javascript">opener.init();</script>
</body>
</html>

test.js that is loaded in the parent window:


var init = function(){
var childToolBar = childWin.document.getElementById("cToolbar");
var childTb = new Ext.Toolbar(childToolBar);
childTb.addSeparator();
};

I get this error on IE7 when using ext-all-debug:


line:15469
char:9
Error:No such interface supported
code:0


Thanks
Animal
13 Sep 2007, 4:52 AM
Well for a start, you have timing issues. onReady?
dolittle
13 Sep 2007, 4:56 AM
I have a script in the end of my child html`s <body> that make sure it`s ready:


<script type="text/javascript">opener.init();</script>
Animal
13 Sep 2007, 5:52 AM
Yes, it basically won't work.

To add a button, it's calling document.createElement to create a new <TD>.

It's doing that in the parent window's script context, so the element is in the parent document. That's then being added to the child window's toolbar's <TR>

You can't do this.
dolittle
13 Sep 2007, 7:38 AM
I tried creating the toolbar in the parent window and then append it to the child window:


var init = function(){

var tb = new Ext.Toolbar("toolbar");
tb.addSeparator();

var childContainer = childWin.document.getElementById("cContainer");

var tbDOM = document.getElementById("toolbar");

childContainer.appendChild(tbDOM);

};

and I get:


line:18
char:1
error:no such interface supported
code:0


Shouldn`t it work?
Animal
13 Sep 2007, 7:46 AM
No. For the reason that I outlined above.

This is not going to work for you.
dolittle
13 Sep 2007, 7:49 AM
I guess changing the context to the child window will be too hard and I didn`t see a possibility to create a toolbar from markup.

Thanks for your time.
hendricd
13 Sep 2007, 8:29 AM
but, how about:

[untested]


var init = function(){
var host = window;
with(childWin){
var childToolBar = document.getElementById("cToolbar");
var childTb = new host.Ext.Toolbar(childToolBar);
//or ...
// var childTb = new host.Ext.Toolbar.call(childWin,childToolBar);
childTb.addSeparator();
}
};
dolittle
13 Sep 2007, 8:55 AM
When I use your first suggestion:


var init = function(){
var host = window;
with(childWin){
var childToolBar = document.getElementById("cToolbar");
var childTb = new host.Ext.Toolbar(childToolBar);

// The next line causes the error
childTb.addSeparator();
}
};


I get an error:


line:15469
char:9
error:no such interface supported
code:0


When I`m using your second suggestion:



var init = function(){
var host = window;
with(childWin){
var childToolBar = document.getElementById("cToolbar");

// the next line causes the error
var childTb = new host.Ext.Toolbar.call(childWin,childToolBar);

childTb.addSeparator();
}
};


and the error:


line:8
char:1
error:object doesn`t support this action
code:0

Your suggestion might be good but I can`t understand it so I might misuse it.
I also couldn`t find what with() does. "with" is a very common word so google didn`t help.
hendricd
13 Sep 2007, 9:03 AM
Does Ext-all-debug show you what object and action ?
dolittle
13 Sep 2007, 9:10 AM
The error occurs in my test.js file.
I think that the childTb is the object but I`m not sure.
I don`t have firebug here so I`ll have to come back to you with more details.

Thanks
Animal
13 Sep 2007, 9:46 AM
There are 286 ocurrences of "document." in Ext's source....

Good luck with this!
hendricd
13 Sep 2007, 2:59 PM
:)) Somebody will put getExtHost() in front of all of them someday. ;)