Events order between DOM event and sencha event

Question

I've a dataview, written with extjs 7.1 modern tookit, with a template with an anchor tag and a select event:

https://fiddle.sencha.com/#view/editor&fiddle/34bd

Ext.create({
    renderTo: document.body,

    xtype: 'list',
    itemTpl: '<div class="contact"><a onclick="event.preventDefault();console.log(\'link\');" href="{firstName}">{firstName}</a> <b>{lastName}</b></div>',

    store: {

        data: [{
            firstName: 'Peter',
            lastName: 'Venkman'
        }, {
            firstName: 'Raymond',
            lastName: 'Stantz'
        }, {
            firstName: 'Egon',
            lastName: 'Spengler'
        }, {
            firstName: 'Winston',
            lastName: 'Zeddemore'
        }]
    },
    listeners: {
        select() { console.log('select'); }
    }
});

I expect the link event will be fired before the list select event, but the opposite happens and even worst both events will be fired one after another.

In your fiddle example, itemtap is Deprecated since version 6.5.0, Use childtap. and about your expectations, why you cannot write your link logic in your childtap event? — LightNight, Mar 10 '20 at 16:07
I need to do different action if the user click on a specific link or in the whole list item. — Luca Minuti, Mar 11 '20 at 07:10
I'm trying to understand where the user clicks as you suggest but I don't know how. You can see the code in sencha fiddle: https://fiddle.sencha.com/#view/editor&fiddle/34bd — Luca Minuti, Mar 11 '20 at 07:37

score 2 · Accepted Answer · answered Mar 11 '20 at 11:58

I'm trying to understand where the user clicks as you suggest but I don't know how.

As @LightNight said, you can use childtap event to run needed handler before select. If you want to understand where the click occurred - just use event.target. Look my example

score 0 · Answer 2 · answered Mar 11 '20 at 10:08

how about onItemDisclosure property of list instead of a link?

use onItemDisclosure function and select listener to separate two actions.

onItemDisclosure : Boolean / Function / String / Object BINDABLE

Set to true to display a disclosure icon on each list item. The list will then fire the disclose event, and the event can be stopped before childtap. By setting this config to a function, the function passed will be called when the disclosure is tapped. This can be either a function object or the name of a Ext.app.ViewController method.

Finally you can specify an object with a scope and handler property defined. This will also be bound to the tap event listener and is useful when you want to change the scope of the handler.

xtype: 'list',
itemTpl: [
    '<div class="contact">',
    '<b>',
    '{firstName} {lastName}',
    '</b>',
    '</div>'
],
onItemDisclosure: function (record, btn, index) {
    console.log('Disclosure');
    Ext.Msg.alert('Tap', 'Disclose more info for ' + record.get('firstName'), Ext.emptyFn);
},
store: {

    data: [{
        firstName: 'Peter',
        lastName: 'Venkman'
    }, {
        firstName: 'Raymond',
        lastName: 'Stantz'
    }, {
        firstName: 'Egon',
        lastName: 'Spengler'
    }, {
        firstName: 'Winston',
        lastName: 'Zeddemore'
    }]
},
listeners: {
        select() {
            console.log('select');
        }
}

here is fiddle example

Good idea but my real data are a bit more comlplex. I updated the fiddle (https://fiddle.sencha.com/#view/editor&fiddle/34bd) with your suggestion of using childtap instead of selected. In this event I've a reference to the clicked element so I can do the work. — Luca Minuti, Mar 11 '20 at 11:07

Events order between DOM event and sencha event

2 Answers2

Linked