ExtJS 4.1 "HoverButton"拡張の問題

Question

私はmouseover/mouseoutでボタンのメニューの表示/非表示を可能にするExt.Buttonの拡張に取り組んでいます。ボタンの直下の子メニューには完全に対応していますが、2次/ 3次/ ectメニューで正しく動作するという問題が発生しています。

メニューが含まれているトップメニューの項目を上に移動すると、メニューが開き、ユーザーはカーソルを問題なく移動でき、すべてが開いたままになります。その後、ユーザがセカンダリメニューからカーソルを空きスペースに移動すると、すべてのメニューが閉じて正しく表示されます。しかし、ユーザーがセカンダリメニューに移動してから親メニューに戻ると、すべてのメニューが閉じられます。これは、カーソルが現在開いている親メニューが少なくとも開いていなければなりません。

私の最初のデバッグでは、イベントの発生方法とそのタイミングに問題があるようです。子メニューから親メニューに戻るとき、親メニューのmouseenterイベントは発生しません。第2に、メニューのmouseoverイベントが子メニューのmouseleaveイベントが発生した後に、遅延隠蔽タスクをキャンセルするのに十分な、またはしばしば十分に起動しないように見えます。問題の

デモ：、それとは根本的に間違っているものはhttp://qs1724.pair.com/users/autod1nx/EMPLOYEE/BDAMI/hoverbutton/index.html

そして、ここではコードです目立つのでしょうか？

Ext.define('Ext.HoverButton', {  
    extend: 'Ext.Button', 
    alias: 'widget.hoverButton', 
    isOver: false, 
    hideDelay: 250, 
    showDelay: 200, 

    applyListeners: function(menu, cfg) { 
     Ext.apply(menu, cfg); 
     Ext.each(menu.items, function(item, idx, allItems) { 
      if(item.menu) this.applyListeners(item.menu, cfg); 
     }, this); 
    }, 

    initComponent: function() { 
     var config = {}, 
      menuConfig = {}, 
      me = this; 

     me.delayedShowMenu = new Ext.util.DelayedTask(function() { 
      if(!me.isOver) return; 
      me.showMenu(); 
     }, this); 

     me.delayedHideMenu = new Ext.util.DelayedTask(function() { 
      if(me.isOver) return; 
      me.hideMenu(); 
     }); 

     if(Ext.isDefined(this.initialConfig.menu)) { 
      config = { 
       listeners: { 
        mouseover: { 
         scope: me, 
         fn: function(b) { 
          me.isOver = true; 
          me.delayedShowMenu.delay(me.showDelay); 
         } 
        }, 
        mouseout: { 
         scope: me, 
         fn: function(b) { 
          me.isOver = false; 
          me.delayedHideMenu.delay(me.hideDelay); 
         } 
        } 
       } 
      }; 

      menuConfig = { 
       listeners: { 
        mouseover: { 
         scope: me, 
         fn: function(menu, item, e) { 
          me.delayedHideMenu.cancel(); 
         } 
        }, 
        mouseenter: { 
         scope: me, 
         fn: function(menu, e) { 
          me.delayedHideMenu.cancel(); 
         } 
        }, 
        mouseleave: { 
         scope: me, 
         fn: function(menu, e) { 
          me.delayedHideMenu.delay(me.hideDelay); 
         } 
        } 
       } 
      }; 


      //apply mouseover/leave listeners to all submenus recursively 
      me.applyListeners(me.menu, menuConfig);  
     } 

     Ext.apply(me, Ext.apply(me.initialConfig, config)); 
     Ext.HoverButton.superclass.initComponent.apply(me, arguments); 
    } 
}); 

Answer 1

私は少し似た何かをやってきたと私はDOMのイベントの順序は、マウスオーバーであることを思わhttp://www.quirksmode.org/dom/events/mouseover.html

でのぞき見を取った後、問題を解決してきました - >のMouseEnter - >マウスアウト - > mouseleaveは、delay（）が設定される前にcancel（）が呼び出されることがあることを意味します。

mouseenter: { 
scope: me, 
fn: function(menu, e) { 
    presentlyInside = menu; /* << */ 
    me.delayedHideMenu.cancel(); 
} 
}, 
mouseleave: { 
scope: me, 
fn: function(menu, e) { 
    if(presentlyInside==menu) /* << */ 
    me.delayedHideMenu.delay(me.hideDelay); 
} 
} 

はそれが役に立てば幸い：私は、変数に入力した最後を保つ問題を解決するには！

Answer 2

私はこれがうまく動作していることを発見しました。

Ext.define('Ext.HoverButton', { 
extend : 'Ext.Button', 
alias  : 'widget.hoverButton', 
listeners : { 
     mouseover : function() { 
      this.showMenu(); 
     }, 
     menushow : function() { 
      this.mouseLeaveMonitor = this.menu.el.monitorMouseLeave(100, this.hideMenu, this); 
     }, 
     destroy : function(combo) { 
      combo.menu.el.un(combo.mouseLeaveMonitor); 
     } 
    } 
});