更新

Question

我正在使用ExtJS 4.2.0开发一个应用程序并使用Chrome作为我的开发浏览器。我注意到当我隐藏下拉菜单时，黑色方块出现在他们的位置。我假设这不应该发生！还有其他人经历过这个吗？

我正在使用ExtJs 4.2.0和Chrome 27.0.1453.94 m。

谢谢！

更新

经过一些调查后，我发现将ExtJS与Javascript Infovis Toolkit（http://philogb.github.io/jit/）结合使用时会发生这种情况。我已经成功地在这里可靠地重现了这个问题：

<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.compute(); 

        //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>

在上面的示例中，按照以下步骤重新创建问题： 1.单击“打开/关闭菜单”按钮两次（一次打开，一次关闭） 2.单击“警报”按钮。我们刚刚关闭的菜单位置会出现一个黑框。

有没有人看到这个？

Answer 1

我们遇到了同样的问题。它似乎是一个（仅限Windows）Chrome错误，与visibility: hidden css规则相关，Ext默认使用它来隐藏下拉列表。

解决方法是在菜单config中更改css hide技术：

{
  ...
  menu: {
    items: [
      ...
    ], 
    hideMode: 'display'
  }
}

Answer 2

我和Ext js 4.0.1完全一样

除Chrome以外的其他浏览器的行为与预期一致。

感谢您的解决方法。

Answer 3

要将此修复程序应用于所有菜单，而不是必须单独设置它，您只需覆盖Ext.menu.Menu类：

Ext.override(Ext.menu.Menu,{
  hideMode: 'display'
});

这完全解决了我的问题，因为实际上有很多菜单受此影响。

为什么Chrome中会出现黑色方块？

更新

3 个答案: