Calling multiple windows

[Bouki]

Hi

I'm looking for a way to construct windows with custom additionnal dom on load and possibilities to bind event (for a common toolbar)

I tried to achieve this by extending the Ext.air.NativeWindow class and performing changes to the dom by method "onComplete"

This successfully modify the dom... but not only on the main window (called initially via application.xml config)

Here is my code :

main.html

<button onclick = "new Test.Window({file: 'test.html'});">New Window()</button><br />

javascript

Ext.ns('Test');
(function(){
    var Window = Ext.extend(Ext.air.NativeWindow, {
        closable: true,
        maximizable: true,
        minimizable: true,
        resizable: true,
        systemChrome: air.NativeWindowSystemChrome.NONE,
        transparent: true,
        width: 1024,
        height: 768,
       
        constructor: function(config){
            Ext.apply(this, config);
            Window.superclass.constructor.call(this);
            this.center();
            this.show();
        },

        onComplete: function () {
                Ext.DomHelper.append(Ext.get('main').dom, {
                    tag: 'div',
                    html: '--- test ---'
                });
        }
    });
    Test.Window = Window;
})();

[makana]

Hi Bouki,

This successfully modify the dom... but not only on the main window (called initially via application.xml config)

Do you mean "but not only on the main window"? This is what I would expect after seeing your code.
The "Ext" you're calling is the main window's Ext. You have to use:

onComplete: function () {
    var wExt = this.getWindow().Ext;
    wExt.DomHelper.append(wExt.get('main').dom, {
        tag: 'div',
        html: '--- test ---'
    });
    Window.superclass.onComplete.call(this); // don't forget it, it fires the complete event
}

or better:

onComplete: function () {
    var wExt = this.getWindow().Ext;
    wExt.fly('main').createChild({
        tag: 'div',
        html: '--- test ---'
    });
    Window.superclass.onComplete.call(this);
}

If you want to create toolbars, panels - ext components in general - think about Ext.air.Window!

makana

[Bouki]

thanks a lot, this is exactly what I was looking for

and sorry for my mistake in the explaination

[Bouki]

I'm also looking for a way to transmit datas between my windows, by passing them to the constructor

for instance I would like to do new Test.Window{variables: {a: 1, b: 2}}; and then be able to retrieve "a" and "b" from my page

I tried to achieve this by appending to the head markup

<script type="text/javascript">var datas = {a: 1, b: 2}</script>

but this doesn't works because the page is already loaded

is there a simple way to do that ?

[makana]

Bouki,

all Ext.air.NativeWindows (try to) register by default in the Ext.air.NativeWindowManager within the main window. You can use it to access all the windows via their ids. Then use the getWindow method to get access to the dom window object of the window.
e.g.

myWindow.manager.get('idOfMyMainExtAirNativeWindowInstance').getWindow();
// or
Ext.air.App.getRootHtmlWindow().Ext.air.NativeWindowManager.get('myId').getWindow();

As cou can see there's an easier way for the main window's dom window object.

Ext.air.App.getRootHtmlWindow();

makana