YUI3 Dynamic Context Menu on YUI2 Data Table Record

gistfile1.js

Y.delegate(
    "contextmenu",
    function (e) {
        // prevent the browser's own context menu
        e.preventDefault();
        
        var record = this._data_table.getRecord( e.target.get("id") );
        
        // build a list of menu items based on the _options data in the record
        var menu_items = "";
        Y.each(
            record._oData._options,
            function (option, i, a) {
                menu_items += '<li class="yui3-menuitem"><span class="yui3-menuitem-content" id="' + option.code + '-' + Y.guid() + '">' + option.label + '</span></li>';
            }
        );
        
        // assemble a menu node to stuff into the overlay
        var menu_node = Y.Node.create('<div class="yui3-menu"><div class="yui3-menu-content"><ul>' + menu_items + '</ul></div></div>');
        menu_node.plug(
            Y.Plugin.NodeMenuNav
        );
        
        // build and pop up an overlay housing our context menu
        var overlay = new Y.Overlay (
            {   
                render:        true,
                zIndex:        10,
                headerContent: "Options",
                bodyContent:   menu_node,
                xy:            [ e.clientX, e.clientY ]
            }
        );
           
        // subscribe this after so it has access to "overlay" and "record",
        // have it handle the clicks on the menu options, it needs to
        // "close" the overlay
        menu_node.on(
            "click", 
            function (e) {
                //Y.log("menu option chosen");
                //Y.log("menu option chosen - e.target.id: " + e.target.get("id"));
                overlay.destroy();
                
                var matches         = e.target.get("id").match("^([^-]+)-(?:.+)$");
                var selected_action = matches[1];
                
                this._caller.setCurrentRecordWithAction(
                    record,
                    selected_action
                );
            },
            this
        );
           
        // 
        // set up mousedown handler to clear our overlay whenever there is
        // a mouse action somewhere on the page outside of our overlay 
        // (use mousedown here to also catch any other contextmenu events)
        //
        var body_handle = Y.one( document.body ).on(
            "mousedown", 
            function (e) {
                //Y.log("body clicked");
                body_handle.detach();
                
                if (! overlay.get("contentBox").contains( e.target )) {
                    overlay.destroy();
                }
            }
        );
    },
    this._data_table.getContainerEl(),
    "td",
    this
);