如何从 ExtJS 控件引用祖先容器对象？
我正在使用 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: {
…
}
});
以下是我就如何隐藏窗口提出的一些想法：
- this.ownerCt.ownerCt（这是按钮）。不利的是，随着 ExtJS 的未来更新，窗口和按钮之间的父项数量可能会发生变化。
- 以某种方式在 WizardWindow 类中存储对 WizardWindow 实例的引用。
- 以 jQuery 方式查找最接近的 WizardWindow [CSS] 类：$(this).closest('.wizardWindow')。也许 this.findByParentType('WizardWindow') ？
I am using ExtJS to build a window containing several panels as items. One of these panels contains a button.
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.
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.
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:
- 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.
- 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')?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
尝试一下
findParentByType(...)方法怎么样？我记得用过几次。这里您可以使用 xtype 而不是 id 作为参考，xtype 是无论您拥有哪种类型的实例，都是一样的。
How about trying the
findParentByType(...)method? I remember using it a few times.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.
您可以将引用作为范围传递。
buttons: [{ text: 'Cancel', scope:this, handler: function() { } }]You can pass the ref as scope.
buttons: [{ text: 'Cancel', scope:this, handler: function() { } }]在按钮的配置中，作为处理程序属性的同级，您可以添加一个scope: newWizardWindow 属性吗？我不能 100% 确定这是否有效，但我认为会的。这会将按钮处理程序的范围设置为窗口，并且在处理程序函数内您可以执行 this.hide();
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();
this.ownerCt 还将引用父对象，即容器。
因为它使用 this.findParentByType(parent xtype)
this.ownerCt will also gives reference to parent object, which is container.
as it is using the this.findParentByType(parent xtype)