Access controller in extjs kitchensink menu exampl

Question

I have an ExtJs 6.2. application (modern toolkit) and I want to implement the menu example (the top menu). Therefore I have this code in my Main.js file:

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'
            }]
        };
    }
});

When I click on the Menu the menu shows up (as I want it). But when I click on the foo button inside the menu I get this error:

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

My controller MainController.js in the same directory looks as follows:

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


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

I already tried to set a scope like this (in the getMenuCfg function):

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

But then I get this error:

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

How can I access my Controller using this menu?

Answer 1

I didn't figure out what the problem is but created a workaround by adding this onfooClick function to the Main.js file:

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

This will call the own onFooClick method inside Main.js which calls the onFooClickmethod from the controller.