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

How to reference ancestor container object from an ExtJS control?

提问by Chad Johnson

I am using ExtJS to build a window containing several panels as items. One of these panels contains a button.

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

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.

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

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.

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

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

Here are some ideas I have come up with as far as how to hide the window:

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

1. 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.
2. Somehow store a reference to the WizardWindow instance in the WizardWindow class.
3. Find the closest WizardWindow [CSS] class in jQuery fashion: $(this).closest('.wizardWindow'). Maybe this.findByParentType('WizardWindow')?

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

采纳答案by Chau

How about trying the findParentByType(...)method? I remember using it a few times.

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

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

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

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

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

Here you can use the xtypeinstead of the idas reference and the xtypeis the same no matter what instance you have of that type.

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

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

回答by sushant jain

You can pass the ref as scope.

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

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

回答by Jonas

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

在您的按钮配置中，作为处理程序属性的同级，您可以添加一个 scope: newWizardWindow 属性吗？我不是 100% 确定这是否会奏效，但我认为它会奏效。这会将您的按钮处理程序的范围设置为窗口，并且在处理程序函数中您可以执行 this.hide();

回答by Subba Reddy

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

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