MVVM: apply ViewController instance to manually created context menu

Hi everyone

I wanted to add a context menu to an tree panel and use the same ViewController instance for this context menu.

When I created the menu manually via Ext.define, ViewController and ViewModel couldn't be retrieved (Uncaught Error: No method named "onEditClicked" on myApp.view.main.MainController --> my main Controller), so I added them as config of the Menu. It works, but only once because the menu is set as this.view within the ViewController afterwards and that messes everything up.

I figured instead of setting of referencing the instance of the ViewController, I could pass it as a String (like in the View). it works, but it seems like I have two instance of the same ViewController, which is not desired.

So my question: Is it possible to reference to that instance ViewController or do I have to live with 2 instance of the ViewController or rather a Nested Controller with Menu Handlers?

I add a trimmed down version of my code to get you a hint what I'm doing.

My view (where I'm also creating the menu)

Code:

Ext.define('myApp.view.object.ObjectList' ,{
    extend: 'Ext.panel.Panel',
    requires:['myApp.view.object.ObjectListController', 'myApp.view.object.ObjectListModel'],
    alias: 'widget.objectlist',
    
    controller: 'objectlist',
    viewModel: {
        type: 'objectlist'
    },
                
   layout: 'border',
        
   contextMenu : null,
    
    initComponent: function() {
      this.items =  [{
                region : 'west',
                split : true,
                collapsible : true,
                minWidth:  120,
                maxWidth: 300,
                width: 220,
                reference: 'objectlist',
                xtype : 'treepanel',
                lines : false,
                bind : {
                       store : '{objects}'
                },
                listeners: {
                        cellcontextmenu : 'onObjectContextMenu',
                        containercontextmenu : 'onContainerContextMenu'
                },
                rootVisible: false
           },{
                region: 'center',
                reference: 'contentpanel'               
        }];
        this.callParent(arguments);
    },
    
    showMenu : function( e)  {
        if( this.contextMenu == null) 
                this.contextMenu = this.createMenu();
        this.contextMenu.showAt(e.getXY());
    },
    
    createMenu : function() {           
        var contextMenu = Ext.create('Ext.menu.Menu', {
                reference : 'contextmenu',
                viewModel: this.viewModel,
                controller: this.controller, 
                //controller:  'objectlist   <--- works, but seemingly with a new instance of the controller
                        items: [{
                                text : 'edit',
                                handler: 'onEditClicked',
                                bind: {
                                        hidden: '{!menuObject}'
                                }
                        },{
                                text : 'delete',
                                handler: 'onDeleteObjectClicked',
                                bind: {
                                        hidden: '{!menuObject}'
                                }
                        },{
                                xtype : 'menuseparator',
                                bind: {
                                        hidden: '{!menuObject}'
                                }
                        },{                     
                                text : 'add',
                                handler: 'onAddDeskClicked'
                        }]
                });
                return contextMenu;
        }
});

ViewController

Code:

Ext.define('myApp.view.object.ObjectListController', {
  extend: 'Ext.app.ViewController',

  alias: 'controller.objectlist',

        onObjectContextMenu : function( tree, td, cellIndex, record, tr, rowIndex, e, eOpts) {
                this.showContextMenu( e, record);
                
        },

       onContainerContextMenu : function( tree, e, eOpts) {
                this.showContextMenu( e, null);
        },
        
        showContextMenu : function( e, menuObject) {
                e.preventDefault();
                this.getViewModel().set('menuObject', menuObject);
                this.getView().showMenu( e);
        },)

        
        onEditClicked : function() {
                console.log('onEditClicked');
        },
        
        
        onDeleteObjectClicked : function() {
                console.log('onDeleteObjectClicked');
        },

        onAddObjectClicked : function () {
                console.log('onAddObjectClicked');
        }
        
});

I'm not even sure if what I'm trying is a good practice or not, so just correct me if I'm doing this completely the wrong way.

thanks in advance!

MVVM: apply ViewController instance to manually created context menu