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

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并不总是相同的。简而言之，我正在创建一个向导类，当我单击向导的Cancel按钮时，我想隐藏包含该按钮的向导窗口。

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

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

下面是我提出的一些如何隐藏窗口的想法:

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.
this.ownerCt。所有者(这是按钮)。不像以后更新ExtJS那样有利，窗口和按钮之间的双亲数量可能会改变。
Somehow store a reference to the WizardWindow instance in the WizardWindow class.
以某种方式在向导窗口类中存储对向导窗口实例的引用。
Find the closest WizardWindow [CSS] class in jQuery fashion: $(this).closest('.wizardWindow'). Maybe this.findByParentType('WizardWindow')?
找到最近的jQuery样式的向导窗口[CSS]类:$(this). nearest ('.wizard dwindow ')。也许this.findByParentType(“WizardWindow”)?

4 个解决方案

#1

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

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

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

findParentByType(字符串/ Ext。组件/类xtype，[布尔浅层]):Ext.Container

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

根据xtype或类在此组件之上的任何级别找到一个容器。

Here you can use the xtype instead of the id as reference and the xtype is 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');
    }
}]

#2

You can pass the ref as scope.

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

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

#3

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

在您的按钮配置中，作为处理程序属性的兄弟，您是否可以添加一个范围:newWizardWindow属性?我不能百分之百地肯定这是否行得通，但我认为会行得通。这将设置您的按钮处理程序的范围为窗口，在处理程序函数中，您可以这样做。

#4

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

这一点。ownerCt还将引用父对象，即容器。因为它正在使用这个。findParentByType(父xtype)

#1