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

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: '« Previous',
    disabled: true,
    handler: newWizardNavigator.createDelegate(this, [-1])
  },{
    id: 'newWizardNextButton',
    text: 'Next »',
    handler: newWizardNavigator.createDelegate(this, [1])
  }],
  listeners: {
    …
  }
});

以下是我如何隐藏窗口的一些想法:

1. this.ownerCt.ownerCt(这是按钮).与将来更新ExtJS不一样,窗口和按钮之间的父项数量可能会发生变化.
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

通过xtype或类在任何级别查找此组件上方的容器.

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

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