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')?
