私のExtJS 5パネルは、どのようにVCを介してショーリスナーを解決できないのですか？

Question

ExtJS 5.1.3 - シンプルなPanelがVCを 'show'イベントで解決できないというのは、ちょっと困惑しています。添付されたフィドルが動作します - それはVCを持つパネルを持っています。ボタンをクリックすると、VCが正しく解決されたことが表示されます。

ただし、 'show'イベントのコメントを解除すると、機能が見つからないため、コンソールでコードが失敗します（mypanel-xxxxの "show"リスナーのスコープを動的に解決できません）。私のコードの多くはこれのように既に動作します、私は何か愚かなことをしていますか？

MVCネストの問題のような場合には、widget（）の代わりにadd（）を使用しようとしましたが、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' 
    } 
});