View Full Version : itemmouseenter\itemmouseleave events on grid rows

12 Mar 2014, 9:18 PM
Hello Guys!

It seems I have some issue with itemmouseenter\itemmouseleave events on grid rows, I use this events for dynamic display\hide icons on row cells like this

columns: [{
header: __('Name'),
xtype: 'templatecolumn',
tpl: [
'<table style="width:100%;height:14px;table-layout: fixed;">',
'<td style="overflow:hidden;text-overflow: ellipsis">',
'</td><td style="width:20px;">',
'<img class="img-icon-install16" align="right" title="'+__("Install SS")+'" style="float:right; cursor:pointer;margin-bottom: -6px;opacity:0;">',
listeners: {
click: function(g, td, rowIdx, colIdx, Event, record) {
if(Event.target.tagName == 'IMG'&& !Event.target.classList.contains('click')){
var record = g.getSelectionModel().getSelection()[0];

itemmouseenter: function(grid, record, item, index, e){
print('itemmouseenter', index);
var img = item.getElementsByTagName('img')[0];
img.style.opacity = 1;
itemmouseleave: function(grid, record, item, index, e){
print('itemmouseleave', index);
var img = item.getElementsByTagName('img')[0];
img.style.opacity = 0;

so Am I have any guarantee that after itemmouseenter event fired itemmouseleave event?
This code works perfect on ExtJS and now on version sometimes only itemmouseenter fires so image shows on many rows and don't hide.

16 Mar 2014, 7:40 PM
well my hacky solution is attach to x-grid-row-over own ExtJS css class for sign mouseover row, which displayed stable despite on strange behavior of itemmouseenter\itemmouseleave events

.x-grid-row-over .x-row-over-icon {
opacity: 1 !important;

.x-row-over-icon {
opacity: 0;

and my template update

'<img class="img-icon-delete16 x-row-over-icon" align="right" title="'+__("Uninstall SS")+'" style="float:right; cursor:pointer;margin-bottom: -6px;">',