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

Question

我在试图弄清楚如何从另一个 ViewController 监听一个 View Controller 中触发的事件时遇到了麻烦。

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

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 示例并查看了事件是如何触发的以及其他 viewController 是如何监听它们的。

此外，如果在一个区域的网格上进行选择会导致另一个面板发生大量更改，那么最佳实践是什么？是否应该将事件作为全局触发，以便所有组件都能听到它？还是我应该在主控制器（不是 ViewController）中收听它并根据事件生成组件？

谢谢！

Answer 1

文档说：

选择器是控制器的 id 或任何控制器的“*”通配符。

与直觉相反，我们不应该将任何 id 或 itemId 分配给我们想要监听的控制器，但 id 是由 Application 自动创建的，并且 id 等于控制器类名。

我制作了simple example - 按钮，2 个控制器 C1 监听按钮，C2 监听 C1。

Answer 2

事件处理也在 ViewControllers 之间工作，但您需要在监听配置中提供控制器的 id（如 Saki 所述），例如触发 ViewController：

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

监听的 ViewController 如下所示：

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

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

Answer 3

小修正，id不需要hash，其实不会用，应该是：

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