ExtJS: add new MenuItem to Menu instance at runtime

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.

Have you tried to apply just a configuration? Maybe there's a bug? Basically this should work out of the box without any additional calls required. — sra, Sep 14 '12 at 10:51
@sra I agree with you that it should work out of the box. What do you mean by "*apply just a configuration*"? Thanks. — Joseph Victor Zammit, Sep 14 '12 at 10:58
I posted a example that works. Let me know if you need additonal info/help — sra, Sep 14 '12 at 11:07

sra · Accepted Answer · 2014-02-17T20:57:21.617

5

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.

edited Feb 17 '14 at 20:57

answered Sep 14 '12 at 11:06

sra

23,820
7
55
89

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). – Joseph Victor Zammit Sep 14 '12 at 11:26
@sra Could you please update the answer to say at the very top that the OP's answer *does work* as is? I didn't read the comments the first time I came here and went off on a wild goose chase trying to force eager rendering on a menu item added as a config object. To clarify, the OP's approach *does* work, exactly as is. – Asad Saeeduddin Feb 17 '14 at 18:26

ExtJS: add new MenuItem to Menu instance at runtime

1 Answers1