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();
}

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

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

1 个答案: