PDA

View Full Version : Ext.ux.Bridge - an easy way to use Objects from a child window (AIR included)



iDave
18 Jul 2008, 11:59 AM
Hi, this is my first (very small) plugin for Ext. I've realized it because I'm developing an AIR application, and it makes use of several child windows, other than several js file to include in the <head>... so my target is to include, all js files that I need (or almost all) in the root window, but obviously, child window can't invoke objects and methods created in the parent window...

that is, if I have a magic() function in the parent and in the child I use magic(), I get "magic is undefined"... the "work-around" is pretty well known, we can get that magic method by pointing to the parent window in this way:

window.opener.magic(); (in our website)

and

Ext.air.NativeWindow.getRootHtmlWindow().magic(); (in our AIR application)

... but this solutions are not so user-friendly, I wanted an easier and faster way... after thinking a bit, I wrote my 2 lines of code:



Ext.namespace("Ext.ux.Bridge");

Ext.ux.Bridge.add = function() {

for (var i=0, e=arguments.length; i<e; i++) {
window[arguments[i]] = Ext.isAir ? Ext.air.NativeWindow.getRootHtmlWindow()[arguments[i]] : window.opener[arguments[i]];
}

}



now, in my AIR application, in the child windows, I have only to import the Ext core, and use the "Bridge" to map the parent object:



<script type="text/javascript">
Ext.ux.Bridge.add("Obj1","Obj2"); // you can go on with "obj3","obj4"...
</script>


and then


Obj1.foo.method();

the coolest thing is that, by using Ext.namespace() and putting all the application's components and methods under a single name (i.e. "MyApplication"), with only


Ext.ux.Bridge.add("MyApplication");

we can use all! ...MyApplication.ui.foo.build(), MyApplication.io.foo.read()...

that's the way that I'm following, and it seems to work :)

I hope to help someone and to contribute with the Ext community ;)

gimbles
18 Jul 2008, 7:12 PM
nice, I like it