Custom menu example

by rixo

HTML

<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<div id="test" style="width: 300px; height: 300px; background-color: pink;">Yo :)</div>

CSS

.myContextMenu .x-menu-body {
    background: #fff;
    padding: 1;
}

.myContextMenu ul {
    padding: 0;
    margin: 0;
    text-align: center;
}

.myContextMenu ul li {
    list-style-type: none;
}

.myContextMenu ul li:nth-child(odd) {
    background-color: #e6e6e6;
}

.myContextMenu a:hover {
    background-color: #ccf;
}

.myContextMenu a {
    text-decoration: none;
    color: #000;
    display: block;
    padding: .5em 0;
}

JavaScript

var menu = Ext.create('Ext.menu.Menu', {
    plain: true
    ,cls: 'myContextMenu'
    ,items: [{
        xtype: 'component'
        ,html: ['<ul id="rect_menu" class="contextMenu">',
            '<li><a href="call_to_js_function">Set aaa</a></li>',
            '<li><a href="call_to_js_function">Set xxx</a></li>',
            '<li><a href="call_to_js_function">Set ccc</a></li>',
            '</ul>'].join('')
    }]
});

var node = document.getElementById('test');

Ext.get(node).on({
    contextmenu: function(e) {
        menu.showAt(e.getXY());
        e.preventDefault();
    }
});