View Full Version : How to reference ancestor container object from an ExtJS control?

12 May 2011, 7:34 PM
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:

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.
Somehow store a reference to the WizardWindow instance in the WizardWindow class.
Find the closest WizardWindow [CSS] class in jQuery fashion: $(this).closest('.wizardWindow'). Maybe this.findByParentType('WizardWindow')?

13 May 2011, 9:30 AM
Option 3 is spot on, except it's more generic to do this: