我的ExtJS 5面板如何通過它的VC無法解析show listener？ W/Fiddle

Question

ExtJS 5.1.3 - 我有點困惑，一個簡單的Panel在'show'事件上無法解決VC問題。附帶的小提琴將工作 - 它有一個與VC面板。點擊按鈕查看正確解析的VC。

但是，如果您取消註釋'show'事件，則代碼將在控制檯中失敗，因爲無法找到函數（無法動態地解析mypanel-xxxx上的「show」偵聽器的作用域）。很多我的代碼已經像這樣工作了，我在做一些愚蠢的事情嗎？

我試過使用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' 
    } 
});