Access controller in extjs kitchensink menu example

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?

Please check all occurences of onCreateFolderClick, onFooClick, onFooClicked whether you use the same name, so we can be sure that the issue isn't a wrongly named function or call. — Alexander
– Alexander, Commented Nov 15, 2016 at 16:23
I mixed up the names of the method while creating a minimal example for stackoverflow but I got it right in my application (just checked it to be sure). Is there something else that may cause a problem? — Peter
– Peter, Commented Nov 15, 2016 at 16:28

Peter · Accepted Answer · 2016-11-16 16:10:22Z

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.

Collectives™ on Stack Overflow

Access controller in extjs kitchensink menu example

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related