Question

这是dojo1.7 layout acting screwy的延续。

所以我制作了一些工作小部件并对其进行了测试，然后尝试使用http://dojotoolkit.org/documentation/tutorials/1.7/dijit_layout/中的教程改变我的工作，以使布局更好。在以许多有趣的方式失败之后（因此我的最后一个问题），我开始了一条新的道路。我的计划现在是实现布局教程示例，然后粘贴在我的小部件中。出于某些原因，即使遵循本教程也无法正常工作......所有负载都会消失，我将留下一个空白的浏览器窗口。

有什么想法吗？

让我感到震惊的是，它可能是浏览器兼容性问题，我正在使用Firefox 13.0.1。据我所知，Dojo应该与此兼容......

无论如何，有一些代码：

HTML：

<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>stuff</p>
        </div>
        <div>
            <h4>Group 2 Content</h4>
        </div>
        <div>
            <h4>Group 3 Content</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>

Dojo配置：

var dojoConfig = {
        baseUrl: "${request.static_url('mega:static/js')}", //this is in a mako template
        tlmSiblingOfDojo: false,
        packages: [
            { name: "dojo", location: "libs/dojo" },
            { name: "dijit", location: "libs/dijit" },
            { name: "dojox", location: "libs/dojox" },
        ],
        parseOnLoad: true,
        has: {
                "dojo-firebug": true,
                "dojo-debug-messages": true
            },   
       async: true 
    };

其他js的东西：

require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
    "dijit/layout/ContentPane", "dojo/parser"]);

的CSS：

html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}

#appLayout {
height: 100%;
}
#leftCol {
width: 14em;
}

Answer 1

我建议在教程页面上查看“完整演示”，然后使用firebug将代码与示例进行比较。通常他们会遗漏一个额外的'demo.css'文件或其他你需要将所有东西拼接在一起的东西。

版本1.7的dojo布局教程不适用于1.7.2

1 个答案: