道场不工作

Question

我是 dojo 的新手，这是我的代码：

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/resources/dojo.css"></link>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/tundra/tundra.css"></link>
    <link rel="stylesheet" type="text/css" href="../../../../resources/themes/default/styles/layout.css" th:href="@{/resources/default/styles/layout.css}"></link>  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>

    <script type="text/javascript" src="../../../resources/dev/scripts/Spring.js" th:src="@{/resources/spring/Spring.js}"></script>
    <script type="text/javascript" src="../../../resources/dev/scripts/Spring-Dojo.js" th:src="@{/resources/spring/Spring-Dojo.js}"></script>


 <div id="gridContainer" style="width: 100%; height: 400px;"></div>

    <script type="text/javascript">
        dojo.require('dojo.store.JsonRest');
        dojo.require('dijit.layout.ContentPane');
        dojo.require("dijit.form.Button");
        dojo.require('dojox.grid.DataGrid');
        dojo.require('dojo.data.ObjectStore');
        dojo.require('dijit.form.TextBox');
        dojo.require('dojox.data.AndOrReadStore');
        dojo.require('dojo._base.xhr');
        dojo.require('dojo.json')
        dojo.require('dojo.domReady');

        dojo.ready(function() {

            var appLayout = new dijit.layout.ContentPane({
                            id: "appLayout"
                            }, "appLayout");

            var textBox = new dijit.form.TextBox({
                        name: "searchbox",
                        placeHolder: "Search ..."
                        });

            textBox.placeAt('appLayout');              
            appLayout.placeAt('gridContainer');

            appLayout.startup();     
        });
    </script>

firefox 告诉我有错误：

TypeError: d is null
(undefined="[object Object]", undefined="null")ContentPane.js (línea 4)
(undefined="[object Object]", undefined=""appLayout"")_WidgetBase.js (línea 4)
(undefined="[object Object]", undefined=""appLayout"")dojo.js (línea 104)
()home (línea 16)
()dojo.js (línea 237)
()dojo.js (línea 236)
(undefined="1000")dojo.js (línea 237)
[Detener en este error] b._contentSetter&&b._contentSetter.par...=u.getLocalization("dijit","loading",

任何帮助将不胜感激。

Answer 1

你在做一些奇怪的事情。我想你想要一个TextBox inside 一个ContentPane，如果我不正确，那么忘记下面的答案。

这段代码有几个错误：

在创建 appLayout 内容窗格时，您将提供第二个参数（用于将 "appLayout" 放入其中。此参数用于定义应该是的 DOM 节点（或 DOM 节点的 ID）用于放置内容窗格。您没有有一个 ID 名为 appLayout 的 DOM 节点。有关更多信息，请查看 API documention，它表示第二个参数是 srcNodeRef . 解决方法是将此参数留空。

然后第二个错误是您将TextBox 放在ContentPane 中，甚至在它被放置在DOM 本身并启动之前。因此，重新排列您的代码，以便首先将 ContentPane 放置在网格容器上将起作用。

完整的代码，有改动：

dojo.require('dojo.store.JsonRest');
dojo.require('dijit.layout.ContentPane');
dojo.require("dijit.form.Button");
dojo.require('dojox.grid.DataGrid');
dojo.require('dojo.data.ObjectStore');
dojo.require('dijit.form.TextBox');
dojo.require('dojox.data.AndOrReadStore');
dojo.require('dojo._base.xhr');
dojo.require('dojo.json')
dojo.require('dojo.domReady');

dojo.ready(function() {

    var appLayout = new dijit.layout.ContentPane({
        id: "appLayout"
    });
    appLayout.placeAt('gridContainer');
    appLayout.startup();

    var textBox = new dijit.form.TextBox({
        name: "searchbox",
        placeHolder: "Search ..."
    });
    textBox.placeAt('appLayout');              
});

或作为JSFiddle。 启动可能不需要能够放置TextBox，但现在代码分组更好一些。

我还想建议更新您的代码以使用异步语法（Dojo 1.7+），因为您使用的语法自 1.7 以来已被弃用，并且由于您使用的是 1.9，我认为编写没有任何好处使用旧语法的新代码，因为它在 Dojo 2.0 中不起作用。