为什么我的 ExtJS 5 面板无法通过 VC 解析显示监听器？瓦特/ Fiddle

Question

ExtJS 5.1.3 - 我有点困惑，一个简单的面板无法在 'show' 事件上解析它的 VC。附加的 fiddle 将起作用 - 它有一个带有 VC 的面板。单击按钮可查看 VC 正确解析。

但是，如果您取消注释 'show' 事件，代码将在控制台中失败，因为找不到该函数（无法动态解析 mypanel 上的 "show" 侦听器的范围- xxxx).我的很多代码已经这样工作了，我是不是在做傻事？

我试过使用 add() 而不是 widget() 以防它是某种 MVC 嵌套问题，但 Ext 只是在错误的 VC 中寻找函数 - 顶部 -级别 VC 应用于视口。

非常感谢任何帮助。谢谢

https://fiddle.sencha.com/#view/editor&fiddle/1kvd

Ext.define('Admin.view.TheController', {
    extend : 'Ext.app.ViewController',
    alias  : 'controller.thecontroller',

    doShowStuff : function() {
        Ext.Msg.alert('SHOW STUFF!', 'yep, this works');
    },

    doOkStuff : function() {
        Ext.Msg.alert('OK STUFF!', 'yep, this works');
    }
});

Ext.define('Admin.view.Panel.MyPanel', {
    extend     : 'Ext.panel.Panel',
    alias      : 'widget.mypanel',
    autoRender : true,
    autoShow   : true,
    controller : 'thecontroller',
    width      : 200,
    height     : 200,
    html       : 'I am your panel',

    buttons : [
        { text : 'OK', handler : 'doOkStuff', scope : 'controller' }
    ],

    listeners : [
        // This listener causes an error
        //{ show : 'doShowStuff', scope : 'controller' },
    ]
});

Ext.widget('mypanel');

Answer 1

listeners: {
    // This listener causes an error
    show:{
        fn: 'doShowStuff',
        scope: 'controller'
    }
}

这是fiddle

Answer 2

您的侦听器配置错误，它们应该是一个对象，而不是数组。另外，你应该省略范围，它会自动确定：

Ext.define('Admin.view.Panel.MyPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mypanel',
    autoShow: true,
    controller: 'thecontroller',
    width: 200,
    height: 200,
    html: 'I am your panel',

    buttons: [{
        text: 'OK',
        handler: 'doOkStuff'
    }],

    listeners: {
        show: 'doShowStuff'
    }
});

为什么我的 ExtJS 5 面板无法通过 VC 解析显示监听器？瓦特/ Fiddle

How come my ExtJS 5 panel cannot resolve a show listener via it's VC? W/ Fiddle

javascript

extjs5