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( {
    id: 'malone',
    //title: 'opciones',
    margin: '0 0 10 0',
    plain: true, //elimina separador
    //defaults:{  
      //  iconAlign: 'top' // <--- we change the icon position  
    //},
    data:{
          clienteId : 0  
        },
    floating: true, 
    items: [{                        
        text: 'buscar amigos',
        iconCls:'back',        
        handler: function(){
            alert('buscando amigos para: ' + menu.data.clienteId);
                //console.log(menu.id)            
        }      
    },{
        text: 'agendar resrva',
        handler: function(){
                //alert('me apretaron');
                console.log(this)            
        }  
    },{
        text: 'regular item 3'  
    }]
}); 

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

Ext.select("div.persona").on("contextmenu",function(e,t) {
                    e.stopEvent();    
                    menu.data.clienteId  = t.id;    
                    menu.showBy(t);
                    //console.log(t.id);//joya
                    console.log(t.id);//joya
                    return false;
                });