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

Question

我有一个 ExtJs 6.2。应用程序（现代工具包），我想实现 menu example （顶级菜单）。因此我的 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();
}

这将在 Main.js 中调用自己的 onFooClick 方法，后者从控制器调用 onFooClick 方法。

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

Access controller in extjs kitchensink menu example

extjs

extjs6

extjs6-modern