PDA

View Full Version : ExtJS 4.2 tooltip bug - Weird mouse hover-over messages are displayed randomly



oscarj24
15 Jul 2016, 10:02 AM
Hi all,

According to the below quote based on here: https://www.sencha.com/forum/showthread.php?283298-tooltip-bug

It seems that Sencha CLOSED the topic and added the following message on top "Looks like we can't reproduce the issue or there's a problem in the test case provided".

However, the bug still exists and I've prepared another demo with some notes to consider (please read them in the JSFiddle code) since the previous one posted by that time (2014) wasn't working properly and it seemed to be the reason why the topic was closed.

Test case can be found at:
https://jsfiddle.net/oscarj24/hnknqsu8/

Take the time to review and solve it soon, if possible, since many web applications still using these ExtJS 4.2.x versions :-|

Thanks,
Oscar Jara


Hey. I found a strange bug in 4.2.2.
When I have a treepanel with qtip and a grid added after expending the treepanel.


I have create a fiddle here: https://fiddle.sencha.com/#fiddle/4hq
If you change the lib with ext-4.2.1 you will see that the bug is not reproductible.

here is a standlone html (need a extjs lib in ../libs/ext-4.2.2):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Tooltip bug - tooltip from left treegrid attached to the grid in center</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../libs/ext-4.2.2/resources/css/ext-all.css" />

<script type="text/javascript" src="../libs/ext-4.2.2/ext-all-debug.js"></script>

<!-- overrides to base library -->
<script type="text/javascript">
Ext.tip.QuickTipManager.init();

var
viewport,
components = [{
region: 'north',
height: 120,
xtype: 'fieldset',
title: 'a field set',
items: {
xtype: 'label',
html: 'to reproduce the bug its easy.<ul><li> click on the array next to node with tooltip</li><li>click on "happy"</li><li>move your mouse over the grid in the center panel</li><li>Voila. You see a tooltip the tooltip of "I like chocolate" over the grid.</li></lu>'
}
}, Ext.create('Ext.Panel', {
layout: 'border',
region: 'center',
frame: true,
items: [{
id: "center-panel",
title: 'Center panel',
region: 'center',
layout: 'fit',
items: {
xtype: 'container',
html: 'click on one of childe of groupe 1 and see the tooltip attached to this grid'
}
}]
}), {
region: 'west',
height: 100,
width: 200,
layout: 'accordion',
layoutConfig: {
titleCollapse: true,
hideCollapseTool: false
},
collapsible: true,
split: true,
items: {
xtype: 'treepanel',
title: "tooltip bug!",
collapsed: false,
autoScroll: true,
rootVisible: false,
lines: false,
useArrows: true,
store: Ext.create('Ext.data.TreeStore', {}),
root: {
expanded: true,
children: [{
text: 'node with tooltip',
visible: true,
leaf: false,
children : [{
text: 'hello world',
qtip: "left treegrid tooltip for hello world"
}, {
text: 'happy',
qtip: "left tree grid tooltip for happy !"
}, {
text: 'good morning',
qtip: "left tree grid tooltip for good morning"
}, {
text: 'I like chocolate',
qtip: "left tree grid tooltip for I like chocolate"
}]
}, {
text: 'node wihout tooltip',
id: 'menu-log-files',
leaf: false,
children: [{
text: 'hey'
}, {
text: 'I m'
}, {
text: 'ho'
}, {
text: 'mmmmhh'
}]
}]
},
listeners: {
selectionchange: function (sm, models) {
var center = Ext.getCmp('center-panel');
center.removeAll();
center.add({
title: models.text,
xtype: 'grid',
frame: false,
store: [
['hey', 'hello world'],
['I m', 'happy'],
['ho', 'good morning'],
['mmmmhh', 'I like chocolate'],
],
columns: [
{text: 'data', dataIndex: 'field1'},
{text: 'field', dataIndex: 'field2'}
]
});
}
}
}
}];

Ext.onReady(function() {
viewport = Ext.create('Ext.container.Viewport', {
layout: 'border',
items: components
});
}); //end onReady
</script>
</head>
<body>
<div id="iframe-dom-place"></div>
</body>
</html>


They are strange behaviour:
if the bug occur. I can expend the second sub menu, the one without qtip, and if I click on any submenu to reload the grid, no tooltip will pop.
But If I click on the arrow next to one of the menu who have a qtip then, when I will reload the grid a tooltip will pop again when my mouse will over the grid.

Gary Schlosberg
15 Jul 2016, 12:24 PM
Thanks for letting us know. I've reopened that ticket and added some notes.