Question

Even though Senscha claims ExtJS isn’t supported on mobile devices, it works quite well. The only little annoyance that I have is that a sub menu of a popup menu requires two touches (‘clicks’) to activate.

It seems the first touch activates the menu, the second touch activates the menu option itself. In a menu with multiple options, clicking any option once results in all options being clickable.

I have a popup menu with checkboxes, these have the same issue. Click one activates (i.e., blue background) the option, click 2 actually clicks the checkbox.

I’m sure there’s a way to tell the prototype of the menu to register the first touch as a click, but I’ve been unable to find it. Any help would be greatly appreciated!

Answer 1

I can’t believe it. I think I found a way! Very hacky, but it works.

Ext.util.Observable.observe(Ext.menu.Item);
Ext.menu.Item.on('activate', function(obj, The, eOpts) {
    if (obj.checkHandler) obj.checkHandler(obj);
    if (obj.handler) obj.handler(obj);
    if (obj.checkHandler || obj.handler) {
        if (obj.up().closable) obj.up().close();
        if (obj.up().up().closable) obj.up().up().close();
    }
});

Later on I’ll need to add code that actually walks the tree up to support multiple levels of submenus, for now one is the limit.

This whacky stuff could be replaced with simply calling the menu’s Click() event, but that doesn’t seem to work. I tried:

Ext.menu.Item.on('activate', function(obj, The, eOpts) {
    obj.fireEvent('click');
});

with all flavors of parameters, but no luck.