extjs - extjs kitchensink 菜单示例中的访问控制器

Question

我有一个 ExtJs 6.2。应用程序（现代工具包），我想实现菜单示例（顶部菜单）。因此，我的Main.js文件中有以下代码：

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

当我单击Menu菜单时（如我所愿）。但是，当我单击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

我没有弄清楚问题是什么，但通过将此onfooClick函数添加到Main.js文件中创建了一个解决方法：

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

这将调用自己的onFooClick方法，Main.js其中调用onFooClick控制器的方法。