Question

I need to add a newly-created MenuItem at runtime; so my code currently looks like:

var myMenu = myCmp.query('mymenu')[0]; // retrieve my only Menu object
var menuItem = Ext.create('Ext.menu.Item', {
    itemId: 'myItemId', text: 'textGoesHere'
});
myMenu.add(menuItem);

I’m using the add method to add the item; but nothing happens to the menu items though at run-time. Even though debugging shows that the new item has actually been added to the items config of the Menu instance.

Using the remove method however does work, at run-time.

Question: How to make the newly added MenuItem show at runtime? What am I missing?

UPDATE: the above code works; I had a flawed switch statement that was causing another pass through the logic, removing the last created menuItem.

Answer 1

Comment bump up

The OP wrote

OK I track the issue down; I had a flawed switch statement that was
causing another pass through the logic, removing the last created
menuItem. Still I’ll mark your answer as correct as it works as well
(by passing the config obj).

---

This example works:

var menu = Ext.create('Ext.menu.Menu', {
   width: 100,
   height: 100,
   floating: false,  // usually you want this set to True (default)
   renderTo: Ext.getBody(),  // usually rendered by it's containing component
   items: [{
       text: 'icon item',
       iconCls: 'add16'
   },{
       text: 'text item'
   },{
       text: 'plain item',
       plain: true
   }]
});

menu.add({text:'test'});

I am not quite sure but according to the API the Menu has panel as default type when you look at the menu but it seems to be menuitem according to the menuitem API
This might be a little confusing.