我的数据视图中的每个项目都有一个文本和一个div,代表一个按钮.仅当鼠标悬停在项目上方时,该按钮才会显示.我该如何处理button-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/
问题是,如果单击了按钮div或文本跨度,我无法在itemclick-handler中进行区分.
谢谢&最好的祝福,
米克
解决方法:
在事件监听器中检查event.target.className.这是一个工作示例:
这是代码:
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);
}
}
}]
});
});