0

我有一个数据视图，用 extjs 7.1 现代 takeit 编写，带有一个带有锚标记和选择事件的模板：

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

我希望链接事件将在列表选择事件之前触发，但相反的情况会发生，甚至最糟糕的是，两个事件将一个接一个地触发。

4

2 回答 2

2

我正在尝试按照您的建议了解用户点击的位置，但我不知道如何。

正如@LightNight 所说，您可以childtap在选择之前使用事件来运行所需的处理程序。如果您想了解点击发生的位置 - 只需使用event.target. 看我的例子

于 2020-03-11T11:58:50.623 回答
0

列表的 onItemDisclosure 属性而不是链接怎么样？

使用 onItemDisclosure 函数并选择监听器来分离两个动作。

onItemDisclosure : Boolean / Function / String / Object BINDABLE

设置为true以在每个列表项上显示一个披露图标。然后列表将触发公开事件，并且可以在 childtap 之前停止该事件。通过将此配置设置为一个函数，传递的函数将在点击披露时被调用。这可以是函数对象或 Ext.app.ViewController 方法的名称。

最后，您可以指定一个定义了范围和处理程序属性的对象。这也将绑定到点击事件侦听器，并且在您想要更改处理程序的范围时很有用。

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

这是小提琴的例子

于 2020-03-11T10:08:55.873 回答