extjs4 - 使用 ExtJS4 的父组件查询？

Question

有没有办法查询“向上”？我在一个组件中，并希望使用 control() 为其父事件注册侦听器。这需要一个 Query 让我成为我的主视图的父级。

score 4 · Accepted Answer

在 ExtJS4 中，您可以使用来自 Ext 元素的 'up()'。

参数是您希望找到的父元素的字符串，例如：

var parentEl = Ext.get('childID').up('div.parentClass');

如果您提供有关组件/元素结构的一些详细信息，我可以给出一个适合的具体示例。

编辑：显示从组件“向上”

var myComponent = // however you've got it

var theParentEl = myComponent.getEl().up('div.parentClass');

score 2 · Accepted Answer

通常up('PARENTCLASS')对于你想要做的事情就足够了。这是我在整个代码中所做的，因此元素会为它们所在的表单生成事件：

items: [
...
   { xtype: 'checkbox', listeners: {
      change: function() { this.up('window').fireEvent('checkboxchanged'); }
   }}
...
]

score 2 · Accepted Answer

据我了解，您希望专门从子组件的控制器控制功能中侦听组件的父级调度的事件。

没有像“parent < component”这样的查询选择器，您可以将其放入子控制器的控制函数中以侦听父事件。

通常我只会将父视图添加到孩子的控制器中，然后您可以收听它的事件。但我假设你没有这样做，因为你试图委托给不同的控制器或其他东西。

每当父事件发生时，您都可以在子组件中触发事件。在父控制器内部，您可以这样做：

var child = parent.down('child');
child.fireEvent('myOwnEventName', arg1, arg2, arg3, etc);

然后，您将在子控制器的控制函数中为“myOwnEventName”添加一个处理程序，以运行您想要的逻辑。

如果父级没有控制器，那么您应该将父组件作为视图添加到子级控制器中。

score 1 · Accepted Answer

Sencha 帮助说“可以测试来自候选组件的成员表达式。如果表达式返回真实值，则候选组件将包含在查询中：”在http://docs.sencha.com/ext-js/4 -0/#!/api/Ext.ComponentQuery帮助。

我花了一段时间才意识到我可以在我的控制器中执行以下操作：

this.control({
  'window{down("testcomp")}[down]': { beforedestroy: this.doNotCloseIfUnsaved }
});

使用 {} 操作，我们可以调用任意代码。 从效率的角度来看真的很糟糕，但它完成了工作。我必须添加 [down] 因为它从右到左运行组件查询，所以我们必须确保 down() 在我们尝试运行它之前存在（在每个组件上）。因此，我能够将事件附加到包含我的组件的任何窗口。

当然，也可以使用其他函数，比如 child() 而不是 down() 如果你想确保它是直接的孩子而不是下面的任何地方。

4 回答 4