PDA

View Full Version : itemmouseenter\itemmouseleave events on grid rows



mixo
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;">',
'<tr>',
'<td style="overflow:hidden;text-overflow: ellipsis">',
'{i18n_descr}',
'</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;">',
'</td>',
'</tr>',
'</table>'
],
listeners: {
scope:this,
click: function(g, td, rowIdx, colIdx, Event, record) {
if(Event.target.tagName == 'IMG'&& !Event.target.classList.contains('click')){
Event.target.classList.add('click');
var record = g.getSelectionModel().getSelection()[0];
this.ss_install(record.raw.src);
}
}
}
}],


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 4.2.1.883 and now on version 4.2.2.1144 sometimes only itemmouseenter fires so image shows on many rows and don't hide.

mixo
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;">',