JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://extjs.cachefly.net/ext-4.0.2a/resources/css/ext-all.css" type="text/css" media="screen" title="no title" charset="utf-8">

<style>
    .back{  
        background: url(http://www.quizzpot.com/demos/extjs/panels/icons/arrow_left.png) center 0px no-repeat !important;  
    }  
</style>

<div id="black_square">hfghfg</div>
<br>
<div id="per1" class="persona">Persona 1</div>
<br>
<div id="per2" class="persona">Persona 2</div>

JavaScript

var menu = new Ext.menu.Menu( {

    margin: '0 0 10 0',
    //defaults:{  
      //  iconAlign: 'top' // <--- we change the icon position  
    //},
    floating: true, 
    items: [{                        
        text: 'buscar amigos',
        iconCls:'back',
        handler: function(){
                alert('me apretaron' + this.id); 
        }      
    },{
        text: 'regular item 2'
    },{
        text: 'regular item 3'  
    }]
}); 

Ext.get("black_square").on("contextmenu",function(e,t) {
                    e.stopEvent();
                    menu.showBy(t);
                    return false;
                });

Ext.select("div.persona").on("contextmenu",function(e,t) {
                    e.stopEvent();
                    menu.showBy(t);
                    return false;
                });