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

How to reference ancestor container object from an ExtJS control?

本文关键字：祖先 对象 引用 控件 ExtJS      更新时间：2023-09-26

我正在使用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.ownerCt（这是按钮）。不利于将来对 ExtJS 的更新，窗口和按钮之间的父项数量可能会更改。
  2. 以某种方式在 WizardWindow 类中存储对 WizardWindow 实例的引用。
  3. 以jQuery方式查找最接近的WizardWindow [CSS]类：$（this）.closest（'.wizardWindow'）。也许这个.findByParentType（'WizardWindow'）？

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

findParentByType（ String/Ext.Component/Class xtype， [布尔浅层] ）： 扩展容器

在此组件上方查找容器 按 xtype 或类在任何级别。

在这里，您可以使用 xtype 而不是 id 作为引用，无论您拥有该类型的哪个实例，xtype 都是相同的。

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

您可以将引用作为范围传递。 

按钮：[{    文本："取消"，    范围：本，    处理程序： 函数（） {    }}]

在按钮的配置中，作为处理程序属性的同级，是否可以添加范围：newWizardWindow 属性？我不是100%确定这是否有效，但我认为会。这会将按钮处理程序的范围设置为窗口，在处理程序函数中，您只需执行此操作.hide（）;

this.ownerCt 还将引用父对象，即容器。因为它正在使用this.findParentByType（parent xtype）

相关文章：