How to reference ancestor container object from an ExtJS control?

Question

I am using ExtJS to build a window containing several panels as items. One of these panels contains a button.

I want to attach a handler to my button such that when I click the button, I can hide the window containing the above-mentioned panels and this button.

My question is: how can i get a reference to the parent window of my button WITHOUT referencing the window by id? I literally want a reference to the Ext.Window instance and not the Ext.Panel instance that contains my button.

Note: I do not want to reference the window by id because I am subclassing the Ext.Window class, and therefore the window's id will not always be the same. In short, I am creating a Wizard class, and when I click the wizard's Cancel button, I want to hide the wizard window containing the button.

Here is my code:

var newWizardWindow = new WizardWindow({
  id: 'newWizardWindow',
  title: 'New',
  items: [
    ...
  ],   
  buttons: [{
    text: 'Cancel',
    handler: function() {
      // REFERENCE WizardWindow instance here.
    }
  },{
    id: 'newWizardPreviousButton',
    text: '« Previous',
    disabled: true,
    handler: newWizardNavigator.createDelegate(this, [-1])
  },{
    id: 'newWizardNextButton',
    text: 'Next »',
    handler: newWizardNavigator.createDelegate(this, [1])
  }],
  listeners: {
    …
  }
});

Here are some ideas I have come up with as far as how to hide the window:

1. this.ownerCt.ownerCt (this being the button). Not favorable as with a future update to ExtJS, the number of parents between the window and the button might change.
2. Somehow store a reference to the WizardWindow instance in the WizardWindow class.
3. Find the closest WizardWindow [CSS] class in jQuery fashion: $(this).closest('.wizardWindow'). Maybe this.findByParentType('WizardWindow')?

Answer 1

How about trying the findParentByType(...) method? I remember using it a few times.

findParentByType( String/Ext.Component/Class xtype, [Boolean shallow] ) : Ext.Container

Find a container above this component at any level by xtype or class.

Here you can use the xtype instead of the id as reference and the xtype is the same no matter what instance you have of that type.

buttons: [{
    text: 'Cancel',
    handler: function() {
        // REFERENCE WizardWindow instance here.
        var parentWindow = this.findParentByType('xtypelizardwindow');
    }
}]

Answer 2

You can pass the ref as scope.

buttons: [{
    text: 'Cancel',
    scope:this,
    handler: function() {
    }
}]

Answer 3

In your configuration for your button, as a sibling to your handler property, can you add a scope: newWizardWindow property? I'm not 100% sure if that will work, but I think it will. This will set the scope of your button handler to be the window, and inside the handler function you can just do this.hide();