为什么在视图的控制器中没有触发委托方法

Question

我将按钮组件包含在 html,

{
    xtype: 'container',
    padding: 10,
    width: 560,
    html: '<div class="class1"><span >Enter value <input type="text"  id="unput1">to process</span></div>' +
    '<button class="button" type="button">Click me</button>'
},

并且我在该视图中创建了委托事件

listeners: {
    el: {
        delegate: 'button',
        click: 'onButtonClick'
    }
}

我将 'onButtonClick' 方法放在视图的控制器中（在视图的配置中正确定义为控制器：'mycontroler'）。但是，出于某种原因，应用程序正在 MainController 中寻找此方法。

Ext.util.Event.getFireInfo(): MyApp.view.main.MainController

上没有名为“onButtonClick”的方法

当然，我可以简单地移动主控制器中的方法，但我不理解这种行为，因为它违反了 MVC 范式。谁能给我解释一下？

Answer 1

我无法准确重现您的问题，但我看到在我的示例中它在组件本身而不是侦听器中搜索函数。将范围设置为 'controller' 也会导致运行时异常。但是我没有移动函数，而是看到了以下选项作为替代方案。

1.) 你可以编写一个调用控制器中的函数

listeners: {
     el: {
         delegate: 'button',
         click: function () {
             this.component.controller.onButtonClick();
         }
     }
 }

2.) 您可以将侦听器移动到组件本身

// ...
controller: 'mycontroller',
items: [{
    xtype: 'container',
    padding: 10,
    width: 560,
    html: '<div class="class1"><span >Enter value <input type="text"  id="unput1">to process</span></div>' +
        '<button class="button">Click me</button>',
    listeners: {
        el: {
            delegate: 'button',
            click: 'onButtonClick'
        }
    }
}]

我还创建了一个fiddle：https://fiddle.sencha.com/#view/editor&fiddle/3chv

随时更新这个并展示你的星座。可能有人可以说出 fiddle / 定义的问题到底是什么。

除此之外，这个博客 post 可能会帮助您： https://www.sencha.com/blog/declarative-listeners-in-ext-js-5/

为什么在视图的控制器中没有触发委托方法

Why delegate method is not fired in view's controller

delegates

extjs