我的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
答案 0 :(得分:4)
检查事件监听器中的event.target.className
。这是一个 working 示例:
以下是代码:
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);
}
}
}]
});
});