在视图控制器之间监听事件

Question

我在试图弄清楚如何从一个视图控制器中监听另一个视图控制器中触发的事件时遇到了问题。

我的网格组件定义了一个监听器。

selModel: {
    listeners: {
        selectionchange: 'onChemClick'
    }
},

我的ViewController（称为chemslist）具有触发另一个事件的功能。

onChemClick: function(view, selected) {
    console.log("before firing");
    this.fireEvent('canvasData', this, selected.length);
    console.log("after firing");
    console.log(selected);
}

我有另一个控制器实际上监听此事件并显示数据。

Ext.define('view.canvas.CanvasController', {
extend: 'Ext.app.ViewController',
alias: 'controller.canvas',

listen: {
    controller: {
        chemslist: {
            canvasData: 'onCanvasData'
        }
    }
},

onCanvasData: function() {
    console.log("At Fire");
}

});

由于某种原因，我无法确定为什么CanvasController不能监听事件。我还查看了Ticket示例，并了解了如何触发事件以及其他viewControllers如何监听它们。

此外，如果在一个区域的网格选择会导致另一个面板中发生许多更改，那么最佳实践是什么？是否应该将事件作为全局触发，以便所有组件都可以监听它？或者应该在主控制器（而不是视图控制器）中监听它，并根据事件生成组件？

谢谢！

- Jayaram

Answer 1

事件处理程序还可以在视图控制器之间进行操作，但是您需要在监听配置中提供控制器的ID（如Saki所述），对于您的示例，即触发视图控制器：

Ext.define('Edsp.view.chemslist.ChemsListController', {
extend: 'Ext.app.ViewController',
alias: 'controller.chemslist',
id: 'chemslist',

听取视图控制器的外观如下：

Ext.define('Edsp.view.canvas.CanvasController', {
extend: 'Ext.app.ViewController',
alias: 'controller.canvas',

listen: {
    controller: {
        '#chemslist': {
            canvasData: 'onCanvasData'
        }
    }
},

- stipe

Answer 2

文档中提到：

选择器可以是控制器的id或'*'通配符，代表任何控制器。

与直觉相反，我们不应该为要监听的控制器分配任何id或itemId，而是由应用程序自动创建id，且该id等于控制器类名。

我已经创建了一个简单的示例 - 一个按钮，两个控制器C1监听按钮和C2监听C1。

- Saki

---

我尝试设置一个ID并使用通配符，但它们都不起作用。我不知道是否漏掉了一些非常明显的东西，还是出现了一些严重的问题！ - Jayaram

如果它们都是控制器，那么你的例子是有效的。如果它们是视图控制器呢？ - Jayaram

Answer 3

小修正，id不需要加#号，实际上带有#号会导致无法正常工作，应该写成:

listen: {
controller: {
    'chemslist': {
        canvasData: 'onCanvasData'
    }
}

- Yuri Gridin

---

在ExtJS 5.x中使用别名时，这是正确的方式，不需要使用哈希。 - tstojecki

只是为了更加清晰明确，视图控制器上不需要设置ID，别名可以作为控制器对象中的键使用。 - Grant Humphries