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 回クリックします (開くには 1 回、閉じるには 1 回) 2. [アラート] ボタンをクリックします。閉じたばかりのメニューの位置に黒いボックスが表示されます。

他の誰かがこれを見ますか？

4

3 に答える 3

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 に答える