javascript - ExtJS: add new MenuItem to Menu instance at runtime - Stack Overflow

admin管理员组

文章数量:1323150

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.

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.

• javascript
• extjs
• extjs4
• extjs4.1

Share Follow edited Sep 14, 2012 at 11:27 Joseph Victor Zammit asked Sep 14, 2012 at 10:13 Joseph Victor ZammitJoseph Victor Zammit 15.3k1313 gold badges8181 silver badges104104 bronze badges 3

• 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 Commented Sep 14, 2012 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 Commented Sep 14, 2012 at 10:58
• I posted a example that works. Let me know if you need additonal info/help – sra Commented Sep 14, 2012 at 11:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 ponent
   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.

本文标签： javascriptExtJS add new MenuItem to Menu instance at runtimeStack Overflow