PDA

View Full Version : mouseover event on dataview



prajeesh_bs
6 Jun 2011, 4:44 AM
I need to execute a function (say alert('hi')) when mouse is hovered over the dataview item. i have tried this
var dataview = new Ext.DataView({
itemSelector: 'div.viewTestEl1',

id: 'leftDataView',
loadingText: 'Loading...',
store: thumbStore,
height: 655,
renderTo: 'left',
tbar: new Ext.PagingToolbar({
//store: dashGridStore,
displayInfo: true,
pageSize: 2
}),
tpl: new Ext.XTemplate('<tpl for=".">', '<div class="thumbnail-wrap viewTestEl1" >', '<div class="thumbnail" id="{id}"><img src="{url}" width="133" height="100" class="thumb-img"/></div>', '<div class="clear"></div></div>', '</tpl>'),
listeners: {

onMouseOver : function(e){
alert('hello');
}
}, } //end of listener
}); but this doesnt seem to work. can anybody help?

prajeesh_bs
6 Jun 2011, 4:47 AM
i have read through http://www.sencha.com/forum/showthread.php?36472-DONE-Ext.DataView-mouseover-and-mouseout-events-for-nodes but donno where to paste the prescried code.

skirtle
6 Jun 2011, 6:51 PM
That posting is over 3 years old and barely relevant.

Please read the API docs for DataView:

http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.DataView

The event you are looking for is not exactly hard to find in the docs.

prajeesh_bs
6 Jun 2011, 8:58 PM
Skirtle,
I found the mouseenter and mouseleave events. Thanks for pointing it out :)

prajeesh_bs
6 Jun 2011, 9:12 PM
just to clarify a doubt..
for the dataview i have a mouseenter event and a click event. initially when i enter the mouse over the item the mousenter event works fine. when i click on the item another function executes, at the same time the function that i have written for mouseenter event also executes. Why is this happening?

skirtle
6 Jun 2011, 9:46 PM
It doesn't do that for me. Could you post a test case?

prajeesh_bs
7 Jun 2011, 12:32 AM
var datav = new Ext.DataView({
itemSelector: 'div.viewTestEl1',
//overClass: 'thumbnailOver',
id: 'leftDataView',
multiSelect: true,
autoScroll: false,
trackOver:true,
store: thumbStore,
height: 655,
renderTo: 'left',
tpl: new Ext.XTemplate('<tpl for=".">', '<div class="thumbnail-wrap viewTestEl1" >', '<div class="thumbnail" id="{id}"><img src="{url}" width="133" height="100" class="thumb-img"/></div>', '<div class="clear"></div></div>', '</tpl>'),
listeners: {
click: function (dataView, index, node, e) {alert(1);
}, //end of doubleclick function
mouseenter:function (dataView, index, node, e) {alert(2)
}


} //end of listener
});

skirtle
7 Jun 2011, 1:50 AM
It's because you're using alert(). Using alert() for debugging is infamously unreliable as it interferes with the execution of code. Where possible use alternatives, such as Firebug's console.log().