Window child hide event.

I have a Window that contains several child components (example only contains a Panel). When I hide this Window, I want the child components to do some processing. Is there an event the child components can listen for when the parent is hidden? I tried using hide, disable, and deactivate, but none of them fired.

This is the example code and Fiddle I'm working with:

Code:

var myPanel = Ext.create('Ext.panel.Panel', {
  title: 'My Panel'
});
myPanel.on('afterrender', function() {
    myPanel.el.on('hide', function() {
        alert('el hidden');
    }, this);
}, this);
myPanel.on('hide', function() { alert('hidden'); }, this);
myPanel.on('deactivate', function() { alert('hidden'); }, this);
myPanel.on('disable', function() { alert('hidden'); }, this);

var myWindow = Ext.create('Ext.window.Window', {
  height: 300,
  width: 300,
  items: [myPanel],
  closeAction: 'hide'
});

var button = Ext.create('Ext.button.Button', {
  text: 'Toggle Window',
  renderTo: Ext.getBody()
});
button.on('click', function() {
  if (myWindow.isVisible()) {
    myWindow.hide();
  }
  else {
    myWindow.show();
  }
}, this);

When the Window gets hidden, I want to enter the event listeners. I even started experimenting with getting the DOM Element, but there's no such event as hide. I realize I can control the processing from the Window, but I'd rather have each component listen for an event and take care of itself autonomously.

Any thoughts?

Window child hide event.