道场布局不起作用答案

【问题标题】：dojo Layout is not working道场布局不起作用
【发布时间】：2012-01-25 17:18:52
【问题描述】：

有人可以发布一个道场布局工作示例吗？我有下面的 html 文件，布局根本没有出现，我在 web 应用程序的根目录中有所有与 dojo 相关的文件。[我什至尝试使用 google CDN，但没有帮助] 页面内容在没有布局的情况下显示。我复制粘贴了互联网上可用的示例，但没有成功。将不胜感激您的帮助。提前致谢。

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Layout with Dijit</title>
<style type="text/css">
@import "dojoroot/dijit/themes/tundra/tundra.css";

@import "dojoroot/dojo/resources/dojo.css";

@import "dojoroot/dijit/themes/tundra/claro.css";
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
    data-dojo-config="parseOnLoad: false ,  isDebug: true"></script>

<script>
    dojo.require("dojo.parser");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dijit.layout.ContentPane");
</script>

</head>

<body class="claro">
    <div id="appLayout" class="demoLayout"
        data-dojo-type="dijit.layout.BorderContainer"
        data-dojo-props="design: 'headline'">
        <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region: 'center'">
            <div>
                <h4>Group 1 Content</h4>
                <p>para 1</p>
            </div>
            <div>
                <h4>h4 para 2</h4>
            </div>
            <div>
                <h4>h4 para 3</h4>
            </div>
        </div>
        <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region: 'top'">Header content (top)</div>
        <div id="leftCol" class="edgePanel"
            data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region: 'left', splitter: true">Sidebar
            content (left)</div>
    </div>
</body>
</html>

【问题讨论】：

你设置了 parseOnLoad: false，看起来你不是手动调用解析器。是这样吗？
你看过这里吗？ dojotoolkit.org/documentation/tutorials/1.6/dijit_layout
您好，非常感谢您的回复，首先我放置了 parseOnLoad: ture，它不起作用，然后我尝试了 parseOnLoad: false ，两者都不起作用。我只从上面的链接中举了例子

标签： layout dojo

【解决方案1】：

您需要确保您有 dojo 解析您的文档（请参阅 Frode 的评论）。

另外，你可能需要给你的 body 一个明确的宽度和高度（iirc，否则 IE 会折叠它）。

【讨论】：

你真正的道场大师。看了你的回复，我已经为body的高度和宽度放置了CSS，它解决了。
很高兴有帮助！不要忘记检查答案！

【解决方案2】：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Layout with Dijit</title>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" > 

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

#appLayout { 
    height: 100%; 
} 
#leftCol { 
    width: 14em; 
}
</style>

 <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"     
    data-dojo-config="parseOnLoad: true">
    </script>  

<script>
    dojo.require("dojo.parser");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dijit.layout.ContentPane");
</script>

</head>

<body class="claro">
    <div id="appLayout" class="demoLayout"
        data-dojo-type="dijit.layout.BorderContainer"
        data-dojo-props="design: 'headline'">
        <div class="centerPanel" data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region: 'center'">
            <div>
                <h4>Group 1 Content</h4>
                <p>para 1</p>
            </div>
            <div>
                <h4>h4 para 2</h4>
            </div>
            <div>
                <h4>h4 para 3</h4>
            </div>
        </div>
        <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region: 'top'">Header content (top)</div>
        <div id="leftCol" class="edgePanel"
            data-dojo-type="dijit.layout.ContentPane"
            data-dojo-props="region: 'left', splitter: true">Sidebar
            content (left)</div>
    </div>
</body>
</html>

上面的代码带来了布局。感谢所有帮助过的人。

【讨论】：