Question

我有一个带有BorderContainer的简单页面。顶部区域是简单的ContentPange，中心区域是TabContainer。在顶部区域有一个按钮，用于创建dijit.Menu并将其绑定到顶部区域。还有另一个按钮可以创建EnhancedGrid并将其添加到TabContainer。问题如下：

场景1）如果您创建菜单，然后单击鼠标右键，则只要在第一次显示菜单之前未创建网格，菜单就会正确显示。

场景2）任何其他选项（创建菜单，网格，然后右键单击，或创建网格，菜单然后右键单击）都会在页面中引起闪烁，（如页面正在调整大小）。滚动条将在主体右侧显示一秒钟，菜单将显示一秒钟，然后消失。如果再次单击，将出现菜单，但打开子菜单将关闭将关闭主菜单，子菜单中的选项将不起作用。

我已经能够创建一个小测试用例。对于1.8之前的任何版本的dojo，该行为都是可重现的。我也看到如果边框容器的高度不同于100％（宽度不影响），菜单工作正常

我认为这个问题与眨眼有关。似乎菜单显示时布局正在调整大小，在那一刻菜单失去焦点并自行关闭。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - demo</title>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dojo/dojo.js' djConfig="parseOnLoad: true, locale: 'en-us'"></script>

<script>
 dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
dojo.require("dojox.grid.enhanced.plugins.Menu");
dojo.require("dijit.Menu");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dojox.layout.ContentPane");
</script>    

<style type='text/css'>
@import url('http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dojox/grid/enhanced/resources/tundra/EnhancedGrid.css');
@import url('http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dijit/themes/tundra/tundra.css');
</style>

<style type="text/css">
    html, body { overflow: auto; width: 100%; height: 100%; margin: 0; }
</style>

<script>
    function createMenu(){
        var sMenu = new dijit.Menu({});
        var pSubMenu = new dijit.Menu();
        // Para enviar por mail
        pSubMenu.addChild(new dijit.MenuItem({
            label: "email 1",
            onClick: function(e){
                alert(1)
            }
        }));

        pSubMenu.addChild(new dijit.MenuItem({
            label: "email 2",
            onClick: function(e){
                alert(2)
            }
        }));

        // Añadimos el submenu a la entrada de SendTo
        sMenu.addChild(new dijit.PopupMenuItem({
            label: "SendTo",
            popup: pSubMenu
        }));

    sMenu.addChild(new dijit.MenuItem({
        label: "Open"
    }))
    sMenu.startup();
    return sMenu;
}
</script>
   </head>
 <body class="tundra eco">

  <div id="BorderContainerLevel1" dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%; background: none; border:none; padding:10px 0px 0px 0px;">
   <div id="pane-test-1" dojoType="dijit.layout.ContentPane" region="top" style="height: 105px; "><!-- z-index:10-->
    La cabecera
    <button dojoType="dijit.form.Button" type="button" onclick='launch()'>Create grid</button>
    <button dojoType="dijit.form.Button" type="button" onclick='launchMenu()'>Create Menu</button>
   </div>
    <script>

function launch(){
    var layout = [[
        {
        name: '&nbsp;',
        hidden: true,
        field: 'idDocument'},
    {
        name: '&nbsp;',
        field: 'contentType',
        width: '8%'},
    {
        name: "Name",
        field: 'name',
        width: '62%'},
    {
        name: "Date",
        field: 'date',
        width: '20%'},
    {
        name: "Size",
        field: 'size',
        width: '10%'}
    ]];
    var i = 0;

    var gridId = "grid_" + i

    var grid = new dojox.grid.EnhancedGrid({
        id: gridId,
        query: {
            idDocument: '*'
        },
        title:"titulo",
        structure: layout
    })
    bankerTabContainer.addChild(grid)
    grid.startup();


    var myJson = {"identifier":"idDocument","items":[{"contentType":"pdf","date":"2011-10-26T16:10:45","documentType":"USERDOCUMENT","documentTypeDescription":"User Document","idDocument":534044,"idUser":"OFFMARA","name":"test II Modules.pdf","size":15704}]}
        grid.setStore(new dojo.data.ItemFileWriteStore({
                data: myJson
            }));

}
  </script>
<div dojoType="dijit.layout.TabContainer" id="bankerTabContainer" jsId="bankerTabContainer" style="height: 100%;width: 100%; border: 0px; padding: 0px;" region="center"></div>



  </div>

<script>
function launchMenu(){
    dijit.byId('BorderContainerLevel1').resize();
    var menu1 = createMenu();
    menu1.bindDomNode(dojo.byId("pane-test-1"));
}
</script>
 </body>
</html>

在IE 8/7中创建网格时dijit.Menu的奇怪行为

0 个答案: