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

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

我有一个视图和一个控制器。我正试图为boxready声明一个事件侦听器来调用控制器方法。当我在

initComponent

中声明侦听器时，这不起作用-它说当我希望它在我的控制器中查找方法时，它无法在我的视图中找到该方法

---

例如，请参见此处的JSFIDLE（相关代码在MyPanel.js中）：

无需在initComponent中附加侦听器，以声明方式执行：

listeners: {
     boxready: 'controllerMethodName'
}

---

直接在您的视图中声明

你可以像布兰登建议的那样做。我认为这也是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：

---

建议您阅读以下文章：可以说，VC和视图本质上是耦合的。所以我认为这样做没有意义。是的，它们是通过“controller”属性连接的。但是我不明白为什么视图应该知道控制器的功能。控制器的工作是对视图触发的操作进行操作，然后相应地更改视图。如果视图告诉控制器要对事件做出反应的函数，则视图控制控制器。视图不知道控制器的实现，只知道有一个接口可供委托。这种耦合会丢失，您可以通过简单地实现相同的方法轻松地更改控制器。