Question

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

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

我的问题是：如何在没有按ID引用窗口的情况下获取对按钮父窗口的引用？我真的想要一个Ext.Window实例的引用，而不是包含我的按钮的Ext.Panel实例。

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

这是我的代码：

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

以下是关于如何隐藏窗口的一些想法：

this.ownerCt.ownerCt（这是按钮）。与将来更新ExtJS不一样，窗口和按钮之间的父项数量可能会发生变化。
以某种方式在WizardWindow类中存储对WizardWindow实例的引用。
以jQuery方式查找最接近的WizardWindow [CSS]类：$（this）.closest（'。wizardWindow'）。也许this.findByParentType（'WizardWindow'）？

Answer 1

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

<强> findParentByType （适用   String / Ext.Component / Class xtype，   [Boolean shallow]）：Ext.Container

在此组件上方找到一个容器   在xtype或class的任何级别。

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

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

Answer 2

您可以将ref作为范围传递。

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

Answer 3

在您的按钮配置中，作为处理程序属性的兄弟，您可以添加范围：newWizardWindow属性吗？我不是百分百确定这是否有效，但我认为它会。这会将按钮处理程序的范围设置为窗口，在处理函数内部，您可以执行this.hide（）;

Answer 4

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

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

4 个答案: