Question

我的dataview中的每个项目都有一个文本和一个表示按钮的div。仅当鼠标位于项目上方时才会显示该按钮。如何处理按钮-div上的鼠标点击？

到目前为止我所拥有的是：

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

工作示例：http://jsfiddle.net/suamikim/3ZNTA/

问题是如果单击了button-div或text-span，我无法区分itemclick-handler。

谢谢＆amp;最好的祝福， MIK

Answer 1

检查事件监听器中的event.target.className。这是一个 ~~working~~ 示例：

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

以下是代码：

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

如何在数据视图中处理项目的鼠标点击

1 个答案: