Question

ExtJS 5.1.3 - 我有点困惑的是，一个简单的Panel无法在显示＆＃39;显示＆＃39;事件。随附的小提琴将起作用 - 它有一个带VC的面板。单击按钮以查看VC已正确解析。

如果您取消评论＆＃39; show＆＃39;但是，代码将在控制台中失败，因为无法找到该功能（无法动态解析＆＃34; show＆＃34; mypanel-xxxx上的监听器的范围）。我的代码很多都是这样的，我做的是蠢事吗？

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

非常感谢任何帮助。 THX

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解析显示监听器？ W /小提琴

2 个答案: