Adding removing sub menu items

[MoShAn480]

Hi,

I have a drop down menu on the toolbar. Each menu item in the drop down has sub menu's too. The user adds or removed items using the UI. When i add a menu the first time, it renders an arrow depicting more items. Once all items are removed, i remove the drop down item completely. Then, when another item is added, i first create the drop down menu item, then i add the sub menu entry. The problem is that when i do this after deleting the menu, the arrow depicting more entries is no longer rendered. The menu does work as it should without the arrow there by expanding the menu to show more items.

Here is my code to add:

function addCannedMessage (menuId, messageId, title, menuText){

cannedMessagesBtn.enable();
if (cannedMessages.items.get(menuId) == null){
alert('menu is null: ' + menuId);
cannedMessages.addMenuItem(new Ext.menu.Item({
text: menuText,
id: menuId,
cls: 'x-btn-text-icon'
}));

cannedMessages.items.get(menuId).menu = new Ext.menu.Menu ();

}

cannedMessages.items.get(menuId).menu.addMenuItem (new Ext.menu.Item({
text: title,
id: messageId,
cls: 'x-btn-text-icon',
handler: selectCannedMessage}));

alert('add completed..');
}

Here is the remove function:

function removeCannedMessage (id){
var cannedMessageSubMenu = cannedMessages.items.get('userCannedMessages');
if (cannedMessageSubMenu != null){
var item =cannedMessageSubMenu.menu.items.get(id);
cannedMessageSubMenu.menu.remove(item);
if (cannedMessageSubMenu.menu.items.length == 0)
{
cannedMessages.remove(cannedMessageSubMenu);
}
}

}

Also, i have also tried removing all items from the submenu, but in that case the arrow stays rendered. This is way i tried removing the empty menu completely, then rebuilding it if needed with the above code, but that does not work either.

Any help would be greatly appreciated.