Hi,

I have a simple enough list that contains an image and text wrapped in a div. I add a click event to the div which I need to get the ID from.

It works when you click the div's white space but when you click on the child p or img they seem to be the reference for the clicked object.

Code:
Ext.ns('myInit');

myInit.Main = {
    init: function () {
        var groupingBase2 = {
            tpl: ['<tpl for=".">',
                    '<div id="{ID}" class="result">',
                        '<tpl for="Media">',
                            '<tpl if="[xindex] == \'1\'">',
                                '<img class="result-image" src="{SmallUrl}" />',
                            '</tpl>',
                        '</tpl>',
                        '<div class="result-info">',
                            '<h2>{Title}</h2>',
                            '<p>{Intro}</p>',
                        '</div>',
                    '</div>',
                '</tpl>'],
            itemSelector: 'div.result',
            singleSelect: true,
            grouped: true,
            indexBar: true,
            disclosure: false,
            store: new Ext.data.Store({
                model: 'Result',
                sorters: 'Title',
                getGroupString: function (record) {
                    return record.get('Title')[0];
                }
            })
        };

        var groupingBase = {
            tpl: ['<tpl for=".">',
                    '<div id="{ID}" class="result">',
                        '<tpl for="Media">',
                            '<tpl if="[xindex] == \'1\'">',
                                '<img class="result-image" src="{SmallUrl}" />',
                            '</tpl>',
                        '</tpl>',
                        '<div class="result-info">',
                            '<h2>{Title}</h2>',
                            '<p>{Intro}</p>',
                        '</div>',
                    '</div>',
                '</tpl>'],
            itemSelector: 'div.result',            
            singleSelect: true,            
            disclosure: false,
            store: new Ext.data.Store({
                model: 'Contact',                
                getGroupString : function(record) {
                    return record.get('Title')[0];
                }
            })
        };     

        function handleClick(e, t) {
            console.log(e);
            console.log(t);
            console.log("========================");
            alert(e.target.id + " tapped");
        }   
        
        var results = new Ext.List(Ext.apply(groupingBase, {
            fullscreen: true
        }));
        
        Ext.util.JSONP.request({
            url: 'http://www.ireland.com/api/getitems',
            callbackKey: 'callback',
            params: {
                CategoryID: 17,
                ItemTypeIDs: '21,4',
                Page: 1,
                PageSize: 20,
                SortColumn: 'title',
                SortDirection: 'asc'
            },
            callback: function (data) {
                results.update(data.Items);
                for (i=0;i<data.Items.length;i++) {
                    Ext.EventManager.on(String(data.Items[i].ID), 'tap', handleClick);
                }
            }
        });
    }
};

Ext.setup({
    onReady: function () {
        myInit.Main.init();
    }
});
I could check if has id and get the parents id if it doesn't but I think I've just gone about this the wrong way. Anyone done something similar where the tap event sends the user to a details card for the item?

Thanks,
Denis