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?