Question

首先，我对道场完全不熟悉。我已经开始学习它了。
我有两页。 Index.html和center.html 当我在浏览器中浏览center.html页面时，它工作正常。但是，当我浏览index.html，将center.html作为contentPane的一部分时，它给了我很多我不理解的错误。

“center.html”

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Test dojox.grid.Grid Basic</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
    <style type="text/css">
        @import "js/lib/dojox/grid/resources/Grid.css";
        @import "js/lib/dojox/grid/resources/tundraGrid.css";
        @import "js/lib/dojo/resources/dojo.css";
        @import "js/lib/dijit/themes/tundra/tundra.css";
        body {
            font-size: 0.9em;
            font-family: Geneva, Arial, Helvetica, sans-serif;
        }

        .heading {
            font-weight: bold;
            padding-bottom: 0.25em;
        }

        #grid {
            border: 1px solid #333;
            width: 35em;
            height: 30em;
        }
    </style>
    <script>
    var dojoConfig = {
    baseUrl: "/site/mysite/js/",
    tlmSiblingOfDojo: false,
    packages: [
        { name: "dojo", location: "lib/dojo" },
        { name: "dijit", location: "lib/dijit" },
        { name: "dojox", location: "lib/dojox" }
    ]
};
    </script>
    <script type="text/javascript" src="js/lib/dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dijit.dijit");
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileWriteStore");
        dojo.require("dojo.parser");
    </script>
    <script type="text/javascript" src="js/lib/dojox/grid/tests/support/test_data.js"></script>
    <script type="text/javascript">
        var layout = [[
            new dojox.grid.cells.RowIndex({ width: 5 }),
            {name: 'Column 1', field: 'col1'},
            {name: 'Column 2', field: 'col2'},
            {name: 'Column 3', field: 'col3'},
            {name: 'Column 4', field: 'col4', width: "150px"},
            {name: 'Column 5', field: 'col5'}
        ],[
            {name: 'Column 6', field: 'col6', colSpan: 2},
            {name: 'Column 7', field: 'col7'},
            {name: 'Column 8'},
            {name: 'Column 9', field: 'col3', colSpan: 2}
        ]];
    </script>
</head>
<body class="tundra">
    <div data-dojo-id="grid" id="grid" dojoType="dojox.grid.DataGrid" store="test_store" query="{ id: '*' }" structure="layout" rowSelector="20px"></div>
</body>
</html>

“的index.html”

<!DOCTYPE html>
<html >
<head>

    <link rel="stylesheet" href="js/lib/dijit/themes/claro/claro.css">
    <script>
    var dojoConfig = {
    baseUrl: "/site/mysite/js/",
    tlmSiblingOfDojo: false,
    packages: [
        { name: "dojo", location: "lib/dojo" },
        { name: "dijit", location: "lib/dijit" },
        { name: "dojox", location: "lib/dojox" }
    ]
};
    </script>
<script type="text/javascript" src="js/lib/dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
    <script type="text/javascript" src="js/lib/dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dijit.dijit");
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileWriteStore");
        dojo.require("dojo.parser");
    </script>
    <script>
require(["dijit/layout/BorderContainer", "dijit/layout/ContentPane","dojo/domReady!"], function(BorderContainer, ContentPane){
    // create a BorderContainer as the top widget in the hierarchy
    var bc = new BorderContainer({
        style: "height: 500px; width: 700px;"
    });

    // create a ContentPane as the left pane in the BorderContainer
    var cp1 = new ContentPane({
        region: "left",
        style: "width: 100px",
        content: "hello world"
    });
    bc.addChild(cp1);

    // create a ContentPane as the center pane in the BorderContainer
    var cp2 = new ContentPane({
        region: "center",
        href: "center.html"
    });
    bc.addChild(cp2);

    // put the top level widget into the document, and then call startup()
    bc.placeAt(document.body);
    bc.startup();
});
    </script>
</head>
<body class="claro">
    <div id="div"></div>
</body>
</html>

感谢您的任何帮助。我的目标是能够将任何dojo页面/应用程序作为其他dojo页面/应用程序的一部分忘了告诉我，我正在使用dojo 1.10版本。

Answer 1

dijit / layout / ContentPane具有有限的脚本执行功能。因此，当您使用contentpane href功能在另一个html中包含一个带有许多脚本的html时，dijit.layout.contentpane可能无法正确加载html。而是使用dojox / layout / ContentPane。我尝试使用dojox / layout / ContentPane的例子，它对我有用。以下是修改后的center.html和index.html附件。

center.html：

<!DOCTYPE html>
<html>
<head>
    <title>Test dojox.grid.Grid Basic</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
    <style type="text/css">
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dojox/grid/resources/Grid.css";
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dojox/grid/resources/tundraGrid.css";
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dojo/resources/dojo.css";
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dijit/themes/tundra/tundra.css";
        body {
            font-size: 0.9em;
            font-family: Geneva, Arial, Helvetica, sans-serif;
        }

        .heading {
            font-weight: bold;
            padding-bottom: 0.25em;
        }

        #grid {
            border: 1px solid #333;
            width: 35em;
            height: 30em;
        }
    </style>
<!--     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.3/dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script> -->
    <script type="text/javascript">
        dojo.require("dijit.dijit");
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileWriteStore");
        dojo.require("dojo.parser");
    </script>
<!--     <script type="text/javascript" src="/dojo/jazz/test_data.js"></script> -->
    <script type="text/javascript">


    require(["dojo/data/ItemFileWriteStore", "dojox/grid/DataGrid"], function(ItemFileWriteStore){
        data = {
        identifier: 'id',
        label: 'id',
        items: []
    };
    data_list = [
        { col1: "normal", col2: false, col3: "new", col4: 'But are not followed by two hexadecimal', col5: 29.91, col6: 10, col7: false },
        { col1: "important", col2: false, col3: "new", col4: 'Because a % sign always indicates', col5: 9.33, col6: -5, col7: false },
        { col1: "important", col2: false, col3: "read", col4: 'Signs can be selectively', col5: 19.34, col6: 0, col7: true },
        { col1: "note", col2: false, col3: "read", col4: 'However the reserved characters', col5: 15.63, col6: 0, col7: true },
        { col1: "normal", col2: false, col3: "replied", col4: 'It is therefore necessary', col5: 24.22, col6: 5.50, col7: true },
        { col1: "important", col2: false, col3: "replied", col4: 'To problems of corruption by', col5: 9.12, col6: -3, col7: true },
        { col1: "note", col2: false, col3: "replied", col4: 'Which would simply be awkward in', col5: 12.15, col6: -4, col7: false }
    ];
    var rows = 100;
    for(var i=0, l=data_list.length; i<rows; i++){
        data.items.push(dojo.mixin({ id: i }, data_list[i%l]));
    }

    // global var "test_store"
    window.test_store = new dojo.data.ItemFileWriteStore({data: data});

            window.layout = [[
            new dojox.grid.cells.RowIndex({ width: 5 }),
            {name: 'Column 1', field: 'col1'},
            {name: 'Column 2', field: 'col2'},
            {name: 'Column 3', field: 'col3'},
            {name: 'Column 4', field: 'col4', width: "150px"},
            {name: 'Column 5', field: 'col5'}
        ],[
            {name: 'Column 6', field: 'col6', colSpan: 2},
            {name: 'Column 7', field: 'col7'},
            {name: 'Column 8'},
            {name: 'Column 9', field: 'col3', colSpan: 2}
        ]];

            //dijit.byId("grid").startup();


    });



    </script>
</head>
<body class="tundra">
    <div data-dojo-id="grid" id="grid" dojoType="dojox.grid.DataGrid" store="window.test_store" query="{ id: '*' }" structure="window.layout" rowSelector="20px"></div>
</body>
</html>

的index.html：

<!DOCTYPE html>
<html >
<head>

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css">
    <!-- script>
    var dojoConfig = {
    baseUrl: "/site/mysite/js/",
    tlmSiblingOfDojo: false,
    packages: [
        { name: "dojo", location: "lib/dojo" },
        { name: "dijit", location: "lib/dijit" },
        { name: "dojox", location: "lib/dojox" }
    ]
};
    </script-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
    <script type="text/javascript">
        dojo.require("dijit.dijit");
        dojo.require("dojox.grid.DataGrid");
        dojo.require("dojo.data.ItemFileWriteStore");
        dojo.require("dojo.parser");
    </script>
    <script>
require(["dojo/data/ItemFileWriteStore", "dojox/grid/DataGrid", "dijit/layout/BorderContainer", "dojox/layout/ContentPane","dojo/domReady!"], function(ItemFileWriteStore, DataGrid, BorderContainer, ContentPane){
    // create a BorderContainer as the top widget in the hierarchy
    var bc = new BorderContainer({
        style: "height: 500px; width: 700px;"
    });

    // create a ContentPane as the left pane in the BorderContainer
    var cp1 = new ContentPane({
        region: "left",
        style: "width: 100px",
        content: "hello world"
    });
    bc.addChild(cp1);

    // create a ContentPane as the center pane in the BorderContainer
    var cp2 = new ContentPane({
        region: "center",
        href: "center.html"
    });
    bc.addChild(cp2);

    // put the top level widget into the document, and then call startup()
    bc.placeAt(document.body);

    bc.startup();
    cp2.startup();

});
    </script>
</head>
<body class="claro">
    <div id="div"></div>
</body>
</html>

无法在另一个启用dojo的页面中包含/引用一个启用dojo的页面

1 个答案: