Close event for Ext.menu.Menu not being fired

I have a menu with a sub menu which is created by using the menu config.

Code:

createMnu: function(){
  return Ext.create("Ext.menu.Menu",{
    items:[
      {text:'menuitem1},
      {
         text:"sub menu",     
         menu:{
           itemId:"test",
           items:[{xtype:"textfield"},{xtype:"combo"}]
        }
     }
  ]
});

Controller code

Code:

init:function(){
  this.control({
    "menu#test": {
       "close": function(){alert("DONT CLOSE")}
     }
  });
},

theres nothing wrong with my code, i replaced "close" with "mouseleave""mousenter" and other Menu events and the alert pops up.

essentially im trying to check if textfield has a value then I need to alert and prompt user to enter in value for combo as well, along with keeping the menu from closing;

Close event for Ext.menu.Menu not being fired