Question

I’m currently having an issue when trying to obtain the current selected text from the DOM when invoking a Ext.menu.Menu instance. Herewith a simplified example.

1. Select and highlight text from a standard HTML page containing the below EXTJs sample
2. Right-Click to invoke the content menu
3. Selection is available from the event listeners bound to the Context Menu, but not available when entering or selecting an option from the context menu.

Note: sample currently works in Chrome and Firefox due to the console object

Ext.onReady(function() {
    // Context Menu
    var menu = Ext.create('Ext.menu.Menu', {
    items : [{
        text : 'Copy',
        handler : function() {
        // Selection is not available here
        console.log("On Context menu item:" + window.getSelection().toString());

        }
    }],
    listeners : {
        mouseenter : function() {
        // Selection is not available here
        console.log("Enter menu render: " + window.getSelection().toString());
        },
        activate : function () {
        // Selection is still available
        console.log("Activate Context menu render:" + window.getSelection().toString());
        }
    }
    });

    // Bind to contextmenu event listener 
    Ext.getDoc().on('contextmenu', function(ev) {
    menu.showAt(ev.getXY());
    ev.stopEvent();
    // Selection is available
    console.log("On Context menu :" + window.getSelection().toString());
    });
});

Answer 1

Selection is not available when clicking the context menu because after right clicking, the selection is cleared. By the time you left click the menu item, nothing is selected. Check out this fiddle. You can see that the selection is cleared immediately after right click.

You may have to get more fancy and do a save/restore kind of thing, as suggested in this answer.

See this fiddle for an example of a solution.