javascript - 如何从 ExtJS 控件引用祖先容器对象？

Question

我正在使用 ExtJS 构建一个包含多个面板作为项目的窗口。其中一个面板包含一个按钮。

我想将一个处理程序附加到我的按钮，这样当我单击该按钮时，我可以隐藏包含上述面板和该按钮的窗口。

我的问题是:如何在不通过 id 引用窗口的情况下获取对按钮父窗口的引用？我确实想要引用 Ext.Window 实例，而不是包含我的按钮的 Ext.Panel 实例。

注意:我不想通过 id 引用窗口，因为我是 Ext.Window 类的子类，因此窗口的 id 不会总是相同。简而言之，我正在创建一个向导类，当我单击向导的取消按钮时，我想隐藏包含该按钮的向导窗口。

这是我的代码:

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: {
    …
  }
});

关于如何隐藏窗口，以下是我提出的一些想法:

1. this.ownerCt.ownerCt(这是按钮)。不利的是，随着 ExtJS 的 future 更新，窗口和按钮之间的 parent 数量可能会改变。
2. 以某种方式在 WizardWindow 类中存储对 WizardWindow 实例的引用。
3. 以 jQuery 方式查找最接近的 WizardWindow [CSS] 类:$(this).closest('.wizardWindow')。也许是 this.findByParentType('WizardWindow')？

Answer 1

试试 findParentByType(...) 方法怎么样？我记得用过几次。

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

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

在这里你可以使用 xtype 而不是 id 作为引用，无论你有什么实例， xtype 都是一样的类型。

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