ExtJS: keyboard focus specific context menu item

Question

Currently I'm opening a context menu following the strike of a keyboard shortcut.

How do I focus on (and select/highlight) a particular menu item of the context menu? So that then the item's handler can be executed by hitting the return key. I'm running ExtJS 4.1.

This what I'm currently doing:

myMenu.showBy(divElement); // divElement is a DOM object
myMenu.items.items[2].focus(); // focus on 3rd menu item
myMenu.doConstrain(); // move floating component into a constrain region

Still, focus is maintained on the menu element itself.

I haven't tried but according to the documentation Ext.menu.Item has a `focus()` method, just like any Ext.Component. — AndreKR, Nov 07 '12 at 15:19
@AndreKR How I wish it was that simple. I will add more detail to my question. — Joseph Victor Zammit, Nov 08 '12 at 11:55

score 2 · Accepted Answer · answered Nov 08 '12 at 13:51

2

A look into the source reveals that this is done using the setActiveItem() method:

var the_menu = Ext.create('Ext.menu.Menu', {
  items: [
    {
      itemId: 'foo',
      text: 'Foo'
    },
    {
      itemId: 'bar',
      text: 'Bar'
    }
  ]
}).showBy(document.getElementById('some_div'));

the_menu.setActiveItem(the_menu.down('#bar'));

Note that this method is private, however canActivateItem(item) and deactivateActiveItem(andBlurFocusedItem) are public, so it's probably just an oversight.

answered Nov 08 '12 at 13:51

AndreKR

32,613
18
106
168

Thanks; can't possibly imagine why such a useful method is *private*. +1ed and marked correct. – Joseph Victor Zammit Nov 08 '12 at 14:59
Incredible stuff; this works perfectly in Chrome, in Firefox it automatically triggers the handler associated with the menuitem which is set active by `setActiveItem()` function! – Joseph Victor Zammit Nov 09 '12 at 11:00
Can't reproduce that. http://jsfiddle.net/MnVUb/ Maybe you bound it to an enter keydown event and forgot to cancel the default action? – AndreKR Nov 09 '12 at 20:00
I modified my code to access menuitem via `down` as you are doing (was retrieving menu item by index) and I still have the same problem; I'm using Firefox 16.0.2 on Ubuntu 12.04. Thanks a lot for your help so far! – Joseph Victor Zammit Nov 11 '12 at 11:13
I suggest you open another question where you post some of your code and possibly a JSfiddle that shows the problem. It's important how your code is invoked. – AndreKR Nov 11 '12 at 14:20

ExtJS: keyboard focus specific context menu item

1 Answers1