How to hide context menu on mouse out and keep showing showin on mouseover

<title></title>
 <link rel="stylesheet" type="text/css" href="http://extjs-public.googlecode.com/svn/extjs-4.x/release/resources/css/ext-all.css" />
 <script type="text/javascript" src="http://extjs-public.googlecode.com/svn/extjs-4.x/include/ext-all.js" ></script>

 <script type="text/javascript">
     var removeAction = Ext.create('Ext.Action', {
         text: 'Remove this element, because I don\'t like it',
         handler: function(widget, event) {
         contextMenu.hide();
             if (confirm("This element will be removed from DOM. You will need to refresh your browser to make it reappear. Continue?")) {
                 Ext.get("elementContextMenu").remove();
             }
             //return false;
         }
     });
     var contextMenu = Ext.create('Ext.menu.Menu', {
         items: [
         removeAction
         ]
     });
     Ext.onReady(function() {
         Ext.get("elementContextMenu").on("contextmenu", function(event, element) {
             event.stopEvent();

             var mover = contextMenu.on('mouseenter', function() {
             contextMenu.show();
             });
             var mout = contextMenu.on('mouseleave', function() {
                 window.setTimeout(function() { contextMenu.hide(); }, 1000);
             });
             var mmousemove = contextMenu.on('mousemove', function() {
                 window.setTimeout(function() { contextMenu.hide(); }, 3000);
             });

             contextMenu.showAt(event.getXY());
             return false;
         });
     });

 </script>