javascript - How can i handle mouseclicks of items inside a dataview

Question

each item in my dataview has a text and a div which represents a button. The button is only shown when the mouse is over the item. How can i handle a mouseclick on the button-div?

What i have so far is this:

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) {
        // 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);
    }
}

Working example: http://jsfiddle.net/suamikim/3ZNTA/

The problem is that i can't distinguish in the itemclick-handler if the button-div or the text-span has been clicked.

Thanks & best regards, Mik

Answer 1

check the event.target.className in the event listener. Here is a working example:

http://jsfiddle.net/3ZNTA/1/

Here's the code:

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);
                }
            }
        }]
    });
});