在 initComponent 中声明时，事件侦听器未调用控制器方法

Posted 2023-02-26

【中文标题】在 initComponent 中声明时，事件侦听器未调用控制器方法

【英文标题】：Event listener not calling controller method when declared within initComponent

【发布时间】：2015-09-11 22:57:45

【问题描述】：

我使用 ExtJS 已经有一段时间了，但现在我正在尝试将我的项目转换为正确使用他们推荐的 MVC 样式。

我有一个视图和一个控制器。我正在尝试为 boxready 声明一个事件侦听器以调用控制器方法。当我在 initComponent 中声明侦听器时，这不起作用 - 它说当我期望它在我的控制器中查找方法时，它无法在我的视图中找到该方法。

参见此处的 jsFiddle 示例（相关代码在 MyPanel.js 中）：senchafiddle

【问题讨论】：

建议您阅读此主题：sencha.com/forum/showthread.php?300377

【参考方案1】：

initComponent 中不需要附加监听器，声明式地做：

listeners: 
     boxready: 'controllerMethodName'

直接在您的视图上声明这一点。

【参考方案2】：

你可以像 Brandon 提议的那样去做。我认为这也是 Sencha 在其文档中的内容。

我做的有点不同，因为我不知道控制器的视图。关于你的例子，意思是：视图不应该知道控制器内部有或应该有一个 test() 函数。看看控制器内部的 init()：

Ext.define('MyApp.view.MyPanelController', 
    extend: 'Ext.app.ViewController',
    alias: 'controller.mypanel',

    init: function () 
        this.getView().on("boxready",this.test, this);
    ,

    test: function () 

        Ext.Msg.alert('hi');
    
);

在视图中很少：

Ext.define('MyApp.view.MyPanel', 
    extend: 'Ext.form.Panel',
    xtype: 'mypanel',
    controller: 'mypanel',

    html: 'sometext',
    title: 'sometitle'
);

这可能有一些我不知道的缺点。

查看相应的 sfiddle： https://fiddle.sencha.com/#fiddle/tpm

【讨论】：

可以说，VC 和视图本质上是耦合的。所以我认为这样做没有意义。

是的，它们通过“控制器”属性连接。但我不明白为什么视图应该知道控制器的功能。控制器的工作是根据视图触发的操作采取行动，然后相应地更改视图。如果视图告诉控制器用什么函数对事件做出反应，那么视图控制控制器。

视图不知道控制器的实现，只知道有一个接口可以委托给它。这种耦合丢失了，您可以通过简单地实现相同的方法轻松更改控制器。