Dojo dijit.layout.bordercontainer隐藏所有内部内容_Dojo_Dijit.layout

Dojo dijit.layout.bordercontainer隐藏所有内部内容

dojo

Dojo dijit.layout.bordercontainer隐藏所有内部内容,dojo,dijit.layout,Dojo,Dijit.layout,我很难理解新版本1.7.1 dojo工具包，于是又回到了1.5版本。我试图包括bordercontainer来布局我的控件，以匹配其中一个演示，但bordercontainer总是把事情搞砸我正在尝试重新创建以下内容，我创建了菜单部分并执行accordianContainer，但是如果我包括bordercontainer，那么所有显示的都是一条线，看起来像是容器消耗所有东西，我看不到包括菜单在内的内部组件。任何想法都值得赞赏 <body class="claro"> <

我很难理解新版本1.7.1 dojo工具包，于是又回到了1.5版本。我试图包括bordercontainer来布局我的控件，以匹配其中一个演示，但bordercontainer总是把事情搞砸

我正在尝试重新创建以下内容，我创建了菜单部分并执行accordianContainer，但是如果我包括bordercontainer，那么所有显示的都是一条线，看起来像是容器消耗所有东西，我看不到包括菜单在内的内部组件。任何想法都值得赞赏

<body class="claro">
  <form id="form1" runat="server">
  <asp:ScriptManager ID="ToolkitScriptManager1" runat="server">
  </asp:ScriptManager>   
           <div dojoType="dijit.Menu" id="submenu1" data-dojo-props='contextMenuForWindow:true, style:"display:none"' style="display: none;">
                    <div dojoType="dijit.MenuItem">Enabled Item</div>
                    <div dojoType="dijit.MenuItem" data-dojo-props="disabled:true">Disabled Item</div>
                    <div dojoType="dijit.MenuSeparator"></div>
                    <div dojoType="dijit.MenuItem" data-dojo-props="iconClass:'dijitIconCut'">Cut</div>
                    <div dojoType="dijit.MenuItem" data-dojo-props="iconClass:'dijitIconCopy'">Copy</div>
                    <div dojoType="dijit.MenuItem" data-dojo-props="iconClass:'dijitIconPaste'">Paste</div>
                    <div dojoType="dijit.MenuSeparator"></div>
                    <div dojoType="dijit.PopupMenuItem">
                                <span>Enabled Submenu</span>
                    <div dojoType="dijit.Menu" id="submenu2">
                    <div dojoType="dijit.MenuItem">Submenu Item One</div>
                    <div dojoType="dijit.MenuItem">Submenu Item Two</div>
                    <div dojoType="dijit.PopupMenuItem">
                                <span>Deeper Submenu</span>
                    <div dojoType="dijit.Menu" id="submenu4">
                    <div dojoType="dijit.MenuItem">Sub-sub-menu Item One</div>
                    <div dojoType="dijit.MenuItem">Sub-sub-menu Item Two</div>
                    </div>
                </div>
                </div>
                </div>
                <div dojoType="dijit.PopupMenuItem" data-dojo-props="disabled:true">
                        <span>Disabled Submenu</span>
                <div dojoType="dijit.Menu" id="submenu3" style="display: none;">
                <div dojoType="dijit.MenuItem">Submenu Item One</div>
                <div dojoType="dijit.MenuItem">Submenu Item Two</div>
                </div>
                </div>
                <div dojoType="dijit.PopupMenuItem">
                        <span>Different popup</span>
                <div dojoType="dijit.ColorPalette"></div>
                </div>
                <div dojoType="dijit.PopupMenuItem">
                        <span>Different popup</span>
                <div dojoType="dijit.Calendar"></div>
                </div>
                </div>



        <div id="main" dojoType="dijit.layout.BorderContainer" design="sidebar">
           <div id="header" dojoType="dijit.MenuBar" region="top">
                                        <div dojoType="dijit.PopupMenuBarItem" id="edit">
                                                        <span>Edit</span>
                                            <div dojoType="dijit.Menu" id="editMenu">
                                               <div dojoType="dijit.Menu" id="Div1">
                                                        <div dojoType="dijit.MenuItem" id="cut" iconClass="dijitIconCut"
                                                                    onClick="console.log('not actually cutting anything, just a test!')">Cut</div>
                                                        <div dojoType="dijit.MenuItem" id="copy" iconClass="dijitIconCopy"
                                                                    onClick="console.log('not actually copying anything, just a test!')">Copy</div>
                                                        <div dojoType="dijit.MenuItem" id="paste" iconClass="dijitIconPaste"
                                                                    onClick="console.log('not actually pasting anything, just a test!')">Paste</div>
                                                        <div dojoType="dijit.MenuSeparator" id="separator"></div>
                                                        <div dojoType="dijit.MenuItem" id="undo" iconClass="dijitIconUndo">Undo</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div dojoType="dijit.PopupMenuBarItem" id="view">
                                                <span>View</span>
                                            <div dojoType="dijit.Menu" id="viewMenu">
                                            <div dojoType="dijit.MenuItem">Normal</div>
                                            <div dojoType="dijit.MenuItem">Outline</div>
                                            </div>
                                            <div dojoType="dijit.PopupMenuItem">
                                                <span>Zoom</span>
                                            <div dojoType="dijit.Menu" id="zoomMenu">
                                            <div dojoType="dijit.MenuItem">50%</div>
                                            <div dojoType="dijit.MenuItem">75%</div>
                                            <div dojoType="dijit.MenuItem">100%</div>
                                            <div dojoType="dijit.MenuItem">150%</div>
                                            <div dojoType="dijit.MenuItem">200%</div>
                                            </div>
                                            </div>
                                        </div>
                                        <div dojoType="dijit.PopupMenuBarItem" id="themes">
                                                <span>Themes</span>
                                            <div dojoType="dijit.Menu" id="themeMenu"></div>
                                        </div>
                                        <div dojoType="dijit.PopupMenuBarItem" id="dialogs">
                                                <span>Dialogs</span>
                                            <div dojoType="dijit.Menu" id="dialogMenu">
                                            <div dojoType="dijit.MenuItem" data-dojo-props="onClick: showDialog">slow loading</div>
                                            <div dojoType="dijit.MenuItem" data-dojo-props="onClick: showDialogAb">action bar</div>
                                            </div>
                                        </div>
                                        <div dojoType="dijit.PopupMenuBarItem" id="inputPadding">
                                                <span>TextBox Padding</span>
                                            <div dojoType="dijit.Menu" id="inputPaddingMenu">
                                            <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding, checked:true">theme default</div>
                                            <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">0px</div>
                                            <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">1px</div>
                                            <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">2px</div>
                                            <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">3px</div>
                                            <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">4px</div>
                                            <div dojoType="dijit.CheckedMenuItem" data-dojo-props="onClick:setTextBoxPadding">5px</div>
                                            </div>
                                        </div>
                                        <div dojoType="dijit.PopupMenuBarItem" id="help">
                                                <span>Help</span>
                                            <div dojoType="dijit.Menu" id="helpMenu">
                                            <div dojoType="dijit.MenuItem">Help Topics</div>
                                            <div dojoType="dijit.MenuItem">About Dijit</div>
                                            </div>
                                        </div>
                                        <div dojoType="dijit.PopupMenuBarItem" data-dojo-props="disabled:true">
                                                <span>Disabled</span>
                                            <div dojoType="dijit.Menu">
                                            <div dojoType="dijit.MenuItem">You should not see this</div>
                                            </div>
                                        </div>
                </div>
                <div dojoType="dijit.layout.AccordionContainer"minSize="20" style="width: 300px;" id="leftAccordion" region="left" splitter="true">

                        <div dojoType="dijit.layout.ContentPane" title="Popups and Alerts"><div style="padding:8px">
                        </div>
                </div><!-- end AccordionContainer -->                                         
          </div>
       </div>
  </form>


启用项
禁用项
削减
复制
粘贴
启用子菜单
子菜单项一
子菜单项二
更深的子菜单
子菜单项一
子菜单项二
禁用子菜单
子菜单项一
子菜单项二
不同的弹出窗口
不同的弹出窗口
编辑
削减
复制
粘贴
撤消
看法
正常的
轮廓
快速移动
50%
75%
100%
150%
200%
主题
对话
慢加载
动作条
文本框填充
主题默认值
0px
1px
2px
三倍
4px
5px
帮助
帮助主题
关于迪吉特
残废
你不应该看到这个

让BorderContainer进行渲染可能很棘手。通常我发现这是一个尺寸问题，而且尺寸完全不对

我通常会尝试：

使用浏览器开发工具检查与BorderContainer相对应的，并找出其实际大小。它通常类似于一个名为“Metrics”的选项卡，它指示容器的确切位置和大小，以及它的填充和边距。有可能是0px高

在HTML中，显式地将BorderContainer div的宽度和高度设置为静态和硬编码的值（例如style=“width:300px；height:300px”），然后看看会发生什么

我想，除了Royston解决方案之外，对我有效的就是这样做：
dijit.byId（“main”）.resize（）

（其中“main”是BorderContainer的id）。

感谢您的帮助。你在dojo方面做了很多工作/是生产团队的一部分吗？是否有其他信息来源可以帮助wi