ExtJS xtype菜單在Chrome中超時

Question

我有一個ExtJS應用程序，它使用xtype菜單創建包含兩個選項的下拉菜單。其中一個選項，在鼠標懸停時，會出現兩個附加子選項。當試圖將鼠標懸停在某個子選項上時，菜單立即超時並消失。

這隻發生在Chrome中。 Safari很好。另外，如果我使用鍵盤箭頭進行選擇，它可以正常工作。

Ext.define('App.view.deposit.ReportButton', { 
extend: 'Ext.button.Button', 
alias: 'widget.depositreporbutton', 
requires: [ 
    'Ext.menu.Menu', 
    'Ext.menu.Separator' 
], 
text: 'Reports', 
initComponent: function() { 
    var me = this; 
    Ext.applyIf(me, { 
     menu: { 
      xtype: 'menu', 
      minWidth: 200, 
      items: [ 
       { 
        text: 'Deposit Report', 
        menu: { 
         items: [ 
          { 
           xtype: 'menuitem', 
           itemId: 'deposit-report-media-button', 
           text: 'By Media Type' 
          }, 
          { 
           xtype: 'menuitem', 
           itemId: 'deposit-report-fund-button', 
           text: 'By Income Fund' 
          } 
         ] 
        } 
       }, 
       { 
        xtype: 'menuitem', 
        itemId: 'receipt-report-button', 
        text: 'Contribution Receipts' 
       } 
      ] 
     } 
    }); 
    me.callParent(arguments); 
} 
}); 

Answer 1

如果您正在使用ExtJS的4.x中有一個與Chrome 43或更新和4.x的一系列的問題。

這裏的錯誤線程：https://www.sencha.com/forum/showthread.php?301116-Submenus-disappear-in-Chrome-43-beta

這是一個帶固定在這裏宣佈：https://www.sencha.com/forum/announcement.php?a=58

下面是官方的解決辦法：

Ext.define('Override.menu.Menu', { 
    override: 'Ext.menu.Menu', 

    compatibility : '4', 

    onMouseLeave: function(e) { 
     var me = this; 

     // If the mouseleave was into the active submenu, do not dismiss 
     if (me.activeChild) { 
      if (e.within(me.activeChild.el, true)) { 
       return; 
      } 
     } 
     me.deactivateActiveItem(); 
     if (me.disabled) { 
      return; 
     } 
     me.fireEvent('mouseleave', me, e); 
    } 
}); 

，您可以嘗試在這裏：https://fiddle.sencha.com/#fiddle/ndn

要在您的應用程序中使用覆蓋：

1. 把覆蓋文件中的overrides關閉目錄的根文件夾

2. 一下添加到app.js文件：

    
   Ext.Loader.setConfig({ 
       paths: { 
        'Overrides': 'overrides' 
       } 
   }); 
   

3. 添加的要求下Ext.Define節中Application.js文件聲明：

    
   Ext.define('Your.Application', { 
       name: 'App', 
       extend: 'Ext.app.Application', 
       ... 
       requires: [ 
        'overrides.Menu' 
       ] 
   });