I'm developing an application in ExtJS 4.2.0 and using Chrome as my development browser. I've noticed that when I hide dropdown menus black squares appear in their place. I'm assuming this isn't supposed to happen! Has anyone else experienced this?
I'm using ExtJs 4.2.0 and Chrome 27.0.1453.94 m.
Thanks!
UPDATE
After some investigation I've found that it happens when using ExtJS in conjunction with the Javascript Infovis Toolkit (/). I've managed to recreate the problem reliably here:
<html>
<head>
<title>Black Box Experiment</title>
<script type="text/javascript" src=".js"></script>
<link rel="stylesheet" type="text/css" href=".2.0-gpl/resources/css/ext-all.css">
<script type="text/javascript" src=".2.0-gpl/ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
//some data to put in the chart
var data = {
"name": "Test1",
"data": {
"id": "1"
}
};
//Create a new ST instance
var st = new $jit.ST({
injectInto: 'infovis',
duration: 0,
levelDistance: 50,
orientation: "top",
Navigation: {
enable:false,
panning:true
},
Node: {
height: 30,
width: 150,
autoHeight: false,
autoWidth: false,
type: 'rectangle',
overridable: true
},
NodeStyles: {
enable: true,
stylesHover: {
'color': '#dd3333'
},
duration: 700
},
Edge: {
type: 'bezier',
overridable: true
}
});
//load json data
st.loadJSON(data);
stpute();
//emulate a click on the root node.
st.onClick(st.root);
//create our extjs panel for the buttons
Ext.create(Ext.panel.Panel,{
title: "Test panel",
width: 300,
height: 100,
items: [
{
xtype: 'button',
text: 'Open/Close Menu',
menu: [
{text: 'button 1'},
{text: 'button 2'},
{text: 'button 3'},
{text: 'button 4'},
{text: 'button 5'},
{text: 'button 6'}
]
},
{
xtype: 'button',
text: 'Click to open an alert - a black square will appear',
handler: function(){
Ext.Msg.alert("Test","A black box should now be appearing where the menu button is.");
}
}
],
renderTo: Ext.getBody()
});
});
</script>
<div id="infovis" style="width: 300px; height: 300px; margin: auto; overflow: scroll; border: 1px solid black;"></div>
</body>
</html>
In the example above, take the following steps to recreate the problem: 1. Click on the "Open/Close Menu" button twice (once to open, once to close) 2. Click on the "Alert" button. A black box should appear in the position of the menu that we've just closed.
Does anyone else see this?
I'm developing an application in ExtJS 4.2.0 and using Chrome as my development browser. I've noticed that when I hide dropdown menus black squares appear in their place. I'm assuming this isn't supposed to happen! Has anyone else experienced this?
I'm using ExtJs 4.2.0 and Chrome 27.0.1453.94 m.
Thanks!
UPDATE
After some investigation I've found that it happens when using ExtJS in conjunction with the Javascript Infovis Toolkit (http://philogb.github.io/jit/). I've managed to recreate the problem reliably here:
<html>
<head>
<title>Black Box Experiment</title>
<script type="text/javascript" src="http://philogb.github.io/jit/static/v20/Jit/jit-yc.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-debug.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
//some data to put in the chart
var data = {
"name": "Test1",
"data": {
"id": "1"
}
};
//Create a new ST instance
var st = new $jit.ST({
injectInto: 'infovis',
duration: 0,
levelDistance: 50,
orientation: "top",
Navigation: {
enable:false,
panning:true
},
Node: {
height: 30,
width: 150,
autoHeight: false,
autoWidth: false,
type: 'rectangle',
overridable: true
},
NodeStyles: {
enable: true,
stylesHover: {
'color': '#dd3333'
},
duration: 700
},
Edge: {
type: 'bezier',
overridable: true
}
});
//load json data
st.loadJSON(data);
st.pute();
//emulate a click on the root node.
st.onClick(st.root);
//create our extjs panel for the buttons
Ext.create(Ext.panel.Panel,{
title: "Test panel",
width: 300,
height: 100,
items: [
{
xtype: 'button',
text: 'Open/Close Menu',
menu: [
{text: 'button 1'},
{text: 'button 2'},
{text: 'button 3'},
{text: 'button 4'},
{text: 'button 5'},
{text: 'button 6'}
]
},
{
xtype: 'button',
text: 'Click to open an alert - a black square will appear',
handler: function(){
Ext.Msg.alert("Test","A black box should now be appearing where the menu button is.");
}
}
],
renderTo: Ext.getBody()
});
});
</script>
<div id="infovis" style="width: 300px; height: 300px; margin: auto; overflow: scroll; border: 1px solid black;"></div>
</body>
</html>
In the example above, take the following steps to recreate the problem: 1. Click on the "Open/Close Menu" button twice (once to open, once to close) 2. Click on the "Alert" button. A black box should appear in the position of the menu that we've just closed.
Does anyone else see this?
Share Improve this question edited Jun 5, 2013 at 8:55 user1578653 asked Jun 4, 2013 at 15:51 user1578653user1578653 5,03817 gold badges47 silver badges75 bronze badges 3- Without code to test it is likely a moderator will close this question. – Kinlan Commented Jun 4, 2013 at 16:26
- OK, I will try to create a test case for this - it's part of quite a plicated app so I can't just paste it all in. However it is literally just closing a normal everyday menu that causes the problem, and it works absolutely fine on other browsers (FF, IE, Opera). It even works fine on versions of Chrome up to 26. I think it's probably a browser issue... – user1578653 Commented Jun 4, 2013 at 16:30
- I've seen similar during javascript animations on mobile chrome (on android), but only during the animation - they don't persist afterwards... interested to see if you can reproduce this consistently. – Ed_ Commented Jun 4, 2013 at 17:16
3 Answers
Reset to default 3We had this exact same problem. It seems to be a (Windows only) Chrome bug relating to the the visibility: hidden css rule Ext uses by default to hide the dropdown.
A workaround is to change the css hide technique in the menu config:
{
...
menu: {
items: [
...
],
hideMode: 'display'
}
}
Im going thru the exact same thing with Ext js 4.0.1
Other browsers than Chrome behave as expected.
Thanks for the workaround.
To apply this fix to all menus, rather than having to set it individually, you can just override the Ext.menu.Menu class:
Ext.override(Ext.menu.Menu,{
hideMode: 'display'
});
This pletely solved the problem for me, as there were actually a lot of menus affected by this.