Почему моя панель ExtJS 5 не может разрешить прослушиватель шоу через его VC? W/Fiddle

Question

ExtJS 5.1.3 - Я немного озадачен тем, что простая панель не может разрешить ее VC на событии show. Прилагаемая скрипка будет работать - у нее есть панель с VC. Нажмите кнопку, чтобы убедиться, что VC правильно разрешен.

Если вы проигнорируете событие 'show', код не будет работать в консоли, потому что функция не может быть найдена (невозможно динамически разрешить область для «show» прослушивателя на 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' 
    } 
});