4

我正在 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. 单击“警报”按钮。一个黑框应该出现在我们刚刚关闭的菜单的位置。

有没有其他人看到这个？

4

3 回答 3

3

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

一种解决方法是更改​​菜单配置中的 css 隐藏技术：

{
  ...
  menu: {
    items: [
      ...
    ], 
    hideMode: 'display'
  }
}
于 2013-06-05T09:27:20.727 回答
0

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

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

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

于 2013-06-13T10:11:53.847 回答
0

我正在使用 Ext js 4.0.1 完成完全相同的事情

Chrome 以外的其他浏览器的行为与预期相同。

感谢您的解决方法。

于 2013-06-06T17:21:08.920 回答