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: '&laquo; Previous',
    disabled: true,
    handler: newWizardNavigator.createDelegate(this, [-1])
  },{
    id: 'newWizardNextButton',
    text: 'Next &raquo;',
    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')?

score 9 · Accepted Answer · answered May 13 '11 at 06:37

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');
    }
}]

I wish I could give this answer a +10 :) – Alfonso Nishikawa Oct 02 '17 at 10:03 — Alfonso Nishikawa, Oct 02 '17 at 10:03

score 2 · Answer 2 · edited May 13 '11 at 10:14

2

You can pass the ref as scope.

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

edited May 13 '11 at 10:14

Awais Qarni

17,492
24
75
137

answered May 13 '11 at 08:32

sushant jain

213
1
4
12

Here, wouldn't "this" be the button? Is that your intention? – Chad Johnson May 13 '11 at 17:24
Hmm, if you use 'this' inline, I do not think it will work. I asked a similar question. http://stackoverflow.com/questions/8588968/extjs-button-scope – goh Dec 21 '11 at 14:02
this does work, and fyi is the proper way to do this! `this` inside the handler will become the class itself. – Mike L. Feb 11 '12 at 07:39

score 1 · Answer 3 · answered May 13 '11 at 05:56

1

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();

answered May 13 '11 at 05:56

Jonas

4,454
3
37
45

have u tried this? I've used this method in a similar issue http://stackoverflow.com/questions/8588968/extjs-button-scope and Chau above answered it.... – goh Dec 21 '11 at 14:06

score 0 · Answer 4 · answered Jun 15 '11 at 21:32

0

this.ownerCt will also gives reference to parent object, which is container. as it is using the this.findParentByType(parent xtype)

answered Jun 15 '11 at 21:32

Subba Reddy

431
5
6

How to reference ancestor container object from an ExtJS control?

4 Answers4