JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.1.0-gpl/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-4.1.0-gpl/ext-all-debug.js"></script>

CSS

.logentry {
    padding: 10px;
    border-bottom: 1px solid lightgray;
    position: relative;
}

.logentry div.removeicon {
    width: 16px;
    height: 16px;
    background-image: url("http://t2.gstatic.com/images?q=tbn:ANd9GcRfablJkn_FtI7SdjiciKxz--sAfhEOG9rX9kd_tE_nXy76j9Nk7w&t=1");
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
    cursor: pointer;
}

.logentry.logentry-hover div.removeicon {
    display: block;
}

JavaScript

Ext.onReady(function() {
    Ext.define('LogEntry', {
        extend: 'Ext.data.Model',
        fields: [
            { name: 'text',    type: 'string' }
        ]
    });
    
    Ext.create('Ext.panel.Panel', {
        width: 500,
        height: 300,
        renderTo: Ext.getBody(),
        
        layout: 'fit',
        
        items: [{
            xtype: 'dataview',
            
            store: Ext.create('Ext.data.Store', {
                model: 'LogEntry',
                data: [
                    { text: 'item 1' },
                    { text: 'item 2' },
                    { text: 'item 3' },
                    { text: 'item 4' },
                    { text: 'item 5' }
                ]
            }),
            
            tpl: Ext.create('Ext.XTemplate',
                '<tpl for=".">',
                    '<div class="logentry">',
                        '<span>{text}</span>',
                        '<div class="removeicon"></div>',
                    '</div>',
                '</tpl>'
            ),
            
            itemSelector: 'div.logentry',
            trackOver: true,
            overItemCls: 'logentry-hover',
            
            listeners: {
                'itemclick': function(view, record, item, idx, event, opts) {
                    
                    if(event.target.className === 'removeicon'){
                        alert('you clicked the x icon');
                    }
                    
                    // How can i distinguish here if the delete-div has been clicked or some other part of the dataview-entry?
                    console.warn('This item respresents the whole row:', item);
                }
            }
        }]
    });
});