Dojo无法正常工作

时间:2013-08-08 09:29:10

标签: dojo dijit.layout

我是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",

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

你做了一些奇怪的事情。我想的是你想要TextBox 里面 a ContentPane,如果我不对,那就忘记以下答案了。

此代码中存在多个错误:

在创建appLayout内容窗格时,您将提供第二个参数(用于放置"appLayout"。此参数用于定义DOM节点(或DOM节点的ID) )应该用来放置内容窗格。你不要有一个名为appLayout的ID的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中不起作用。