Panel listener when a window is opened inside of it

Question

I have a Panel which acts as a desktop. When a button is clicked a window is opened up inside the panel. I set the following in the config:

var win = Ext.create('window', { 
   renderTo : currentPanel.getLayout().getTarget(),
   constrain : true
});
win.show();

So my window is being open and constrained in the main panel. I want the panel to listen for when any window is open inside of it so I can monitor it. Are there any listener that will do this? I tried 'add' and 'added' but the window has to be added to the panel via:

panel.add(window);

But in my case I'm not adding it to the container, but I'm opening it and constraining it to my container using the renderTo.

Answer 1

What I would do is create a subclass of panel for your desktop and a subclass of window for your windows. Add a 'windowOpened' listener to your custom panel, and fire this event from your custom window's 'show' listener.

Something like this:

DesktopPanel.js

Ext.define('App.view.DesktopPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.desktoppanel',

    initComponent: function() {
        this.callParent();
        this.addListener('windowOpened', function(newWindow){
            //Do whatever it is you want to do here
        });
    }
});    

DesktopWindow.js

Ext.define('App.view.DesktopWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.desktopwindow',

    constrain: true,

    initComponent: function() {
        this.renderTo = this.ownerPanel.getLayout().getTarget();
        this.callParent();
        this.addListener('show', function(){
            this.ownerPanel.fireEvent('windowOpened',this);
        });
    }
});

Then your code would be something like this:

var win = Ext.create('App.view.DesktopWindow', { 
   ownerPanel: MyDesktop,  //an instance of 'DesktopPanel'
});
win.show();