ExtJS 6.02 - Ext.menu.Itemにmouseleaveイベントをアタッチすることはできますか？

Question

ユーザのカーソルがExt.menu.Itemを離れると（メニュードロップダウンからマウスを離して）、最後のマウスオーバーライトメニュー項目から 'x-menu-item-active'クラスを削除したいと思います。

現在のところ、これはExt 6.0.2では自動的には発生しません。つまり、ユーザーがExt.menuからマウスを離したときに、ユーザーが最後に上に乗せたメニュー項目には 'x-menu-item-active' 。

現在、私はこの方法これを達成しています：

Ext.define('MyApp.someController', { 

    init: function() { 
     var me = this; 

     me.control({ 

      '#idOfMyMenu': { 
        mouseleave: me.onMouseLeave 
      } 
     }); 

    }, 

    onMouseLeave: function(target) { 
     var me = this, 
      activeCls = 'x-menu-item-active', 
      menuItems = target.items; 

     Ext.each(menuItems, function(item) { 
      if (item.hasCls(activeCls)) { 
       item.removeCls(activeCls); 
      } 
     } 

    } 
} 

をしかし、これは、ユーザーがマウスを置いて毎回私のドロップダウンメニューにすべてのメニュー項目をループが必要です。とにかく、「mouseleave」リスナーをExt.menu.Itemに添付して、すべてのメニュー項目をループする必要はありませんか？

Ext.menu.Itemクラスには、「blur」、「focusleave」イベントしか含まれていません。このイベントは私が望むことを行えません。

Answer 1

あなたはループを避けることはできませんが、あなたはそれがきれいに見えると思えばあなたがDOMのAPIの後ろにそれを隠すことができます...

onMouseLeave: function(menu, ev){ 
    Ext.fly(ev.getTarget()) 
     .down('.x-menu-item-active') 
     .removeCls('x-menu-item-active'); 
} 

» Fiddle

そうでなければ、アウトにはマウスイベントはありませんすぐに使えるExtメニュー項目を使用するには、独自のカスタムコンポーネントを実装する必要があります。