extjs kitchensinkメニューのアクセスコントローラ

Question

私はExtJs 6.2を持っています。アプリケーション（現代のツールキット）を実装し、menu example（トップメニュー）を実装したいと思います。私はMenuをクリックすると（私はそれをしたいと）

Ext.define('MyApp.view.main.Main', { 
    extend: 'Ext.Container', 
    xtype: 'app-main', 

    layout: { 
     type: 'vbox', 
     pack: 'center', 
     align: 'stretch' 
    }, 
    controller: 'mainController', 
    margin: '0 0 0 0', 
    items: [{ 
     xtype: 'toolbar', 
     docked: 'top', 
     style: 'background-color: red;', 
     items: [{ 
      text: 'Menu', 
      handler: function() { 
       Ext.Viewport.toggleMenu('top'); 
      } 
     }] 
    }], 
    initialize: function() { 
     Ext.Viewport.setMenu(this.getMenuCfg('top'), {side: 'top' }); 
    }, 

    doDestroy: function() { 
     Ext.Viewport.removeMenu('top'); 
     this.callParent(); 
    }, 
    getMenuCfg: function(side) { 
     return { 
      items: [{ 
       text: 'Foo', 
       handler: 'onFooClick', 
       controller: 'mainController' 
      }] 
     }; 
    } 
}); 

メニューが現れます：したがって、私は私のMain.jsファイルでこのコードを持っています。しかし、私は、メニュー内のfooボタンをクリックしたとき、私はこのエラーを取得：

No method named "onFooClick" on Ext.Button(...) 

次のように同じディレクトリに私のコントローラMainController.jsに見えます：

Ext.define('MyApp.view.main.MainController', { 
    extend: 'Ext.app.ViewController', 
    alias: 'controller.mainController', 


    onFooClick: function() { 
     console.log("foo pressed"); 
    } 
}); 

は、私はすでにこのようなscopeを設定しようとしました（getMenuCfg関数内）：

items: [{ 
        text: 'Foo', 
        handler: 'onFooClick', 
        controller: 'mainController', 
        scope: 'controller' 
       }] 

しかし、私はこのエラーを取得する：

Uncaught Error: Named method "onFooClick" requires a scope object(…) 

このメニューを使用してコントローラにアクセスするにはどうすればよいですか？

Answer 1

私は問題がなく、Main.jsファイルにこのonfooClick機能を追加することで回避策を作成しているかを把握していない：これはからonFooClickメソッドを呼び出しますMain.js内部に独自のonFooClickメソッドを呼び出します

onfooClick: function() { 
     this.getController(Ext.String.capitalize('mainController')).onFooClick(); 
} 

コントローラ。