Как отображать подменю на клике вместо mouseover в extjs 6?

Question

В меню extjs 6, как я могу настроить подменю для отображения на клике, а не на мыши? Я не нашел никакой конфигурации для установки триггера отображения подменю и с помощью кнопок, поскольку пункты меню тоже не работали.

var myMenu = Ext.create({ 
     xtype: 'menu', 
     items: [{ 
      text: 'Menu Item 1', 
      menu: { 
       items: [{ 
        text: 'sub-Menu Item 1' 
       }, { 
        text: 'sub-Menu Item 2' 
       }] 
      } 
     }, { 
      text: 'Menu Item 2', 
      menu: { 
       items: [{ 
        text: 'sub-Menu Item 1' 
       }, { 
        text: 'sub-Menu Item 2' 
       }] 
      } 
     }] 
    }); 

Answer 1

Вы должны переопределить с меню onMouseOver и onClick методы, чтобы предотвратить меню от раскрывания. Также необходимо добавить в ваше меню конфигурацию ignoreParentClicks.

Это будет выглядеть примерно так:

Ext.define('Ext.o.menu.Menu', { 
    override : 'Ext.menu.Menu', 
    onClick: function(e) { 
     var me = this, 
      type = e.type, 
      item, 
      clickResult, 
      iskeyEvent = type === 'keydown'; 

     if (me.disabled) { 
      e.stopEvent(); 
      return; 
     } 
     item = me.getItemFromEvent(e); 
     if (item && item.isMenuItem) { 
      if (!item.menu || !me.ignoreParentClicks) { 
       clickResult = item.onClick(e); 
      } else { 
       e.stopEvent(); 
      } 

      // SPACE and ENTER invokes the menu 
      if (item.menu && clickResult !== false) { 
       item.expandMenu(e, 0); 
      } 
     } 
     // Click event may be fired without an item, so we need a second check 
     if (!item || item.disabled) { 
      item = undefined; 
     } 
     me.fireEvent('click', me, item, e); 
    }, 
    onMouseOver: function(e) { 
     var me = this, 
      fromEl = e.getRelatedTarget(), 
      mouseEnter = !me.el.contains(fromEl), 
      item = me.getItemFromEvent(e), 
      parentMenu = me.parentMenu, 
      ownerCmp = me.ownerCmp; 

     if (mouseEnter && parentMenu) { 
      parentMenu.setActiveItem(ownerCmp); 
      ownerCmp.cancelDeferHide(); 
      parentMenu.mouseMonitor.mouseenter(); 
     } 

     if (me.disabled) { 
      return; 
     } 

     // Do not activate the item if the mouseover was within the item, and it's already active 
     if (item) { 
      if (!item.containsFocus) { 
       item.focus(); 
      } 
      // This will not be needed here! 
      //if (item.expandMenu) { 
       //item.expandMenu(e); 
      //} 
     } 
     if (mouseEnter) { 
      me.fireEvent('mouseenter', me, e); 
     } 
     me.fireEvent('mouseover', me, item, e); 
    } 
}); 

Проверить эту скрипку: https://fiddle.sencha.com/#fiddle/u1m