Javascript 不希望使用dojo dijit创建此3窗格布局_Javascript_Layout_Dojo

Javascript 不希望使用dojo dijit创建此3窗格布局

javascript layout dojo

Javascript 不希望使用dojo dijit创建此3窗格布局,javascript,layout,dojo,Javascript,Layout,Dojo,我正在尝试创建一个3窗格布局，顶部、左侧和右侧如图所示我认为dijit的这个模板可以工作： <div class="main" data-dojo-attach-point="dapDomNode"> <div id="header" data-dojo-type="dijit/layout/BorderContainer"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props=

我正在尝试创建一个3窗格布局，顶部、左侧和右侧如图所示

我认为dijit的这个模板可以工作：

<div class="main" data-dojo-attach-point="dapDomNode">
  <div id="header" data-dojo-type="dijit/layout/BorderContainer">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height: 10em; width: 100%; background: #ff0000">
        Header
    </div>

    <div id="subNav" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'" style="height: 35em; width: 22em;background: #0000ff">
        Nav
    </div>

    <div id="main" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="background: #008000">
        Main questions
    </div>

</div>

包含加载程序的实际索引页如下所示：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" href="js/libs/dojo/resources/dojo.css">
    <link rel="stylesheet" href="js/libs/dijit/themes/claro/claro.css">
    <script>
        var dojoConfig = {
                baseUrl: "./js/",
                parseOnLoad: false,
                async: true,
                packages: [
                    {name: "dojo", location: "libs/dojo"},
                    {name: "control", location: "control"},
                    {name: "dijit", location: "libs/dijit"}
                ]
            };
    </script>
    <script src="js/libs/dojo/dojo.js" type="text/javascript"></script>
    <!--
    <%--
    The reason to use a JSP is that it is very easy to obtain server-side configuration
    information (such as the contextPath) and pass it to the JavaScript environment on the client.
    --%>
    -->
    <script type="text/javascript">
        require([
            "dojo/dom",
            "control/Main",
            "dojo/dom-construct",
            "dojo/_base/window"
            //,"dojo/domReady!"
        ], function (
            dom,
            Main,
            domConstruct,
            win
        ){
            var mainApp = new Main({}).placeAt(win.body());
        });
    </script>
</head>
    <body class="claro">
    </body>
</html>

问题是主绿块进入下一个块，如下所示

必须添加dijit/\u WidgetsInTemplateMixin才能在模板中使用小部件：

define([
  'dijit/_WidgetBase',
  'dijit/_TemplatedMixin',
  'dijit/_WidgetsInTemplateMixin',
  // ...
], function (_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin) {
  return declare([ _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {
    // ...
  });
});

此外，您的小部件HTML缺少结束符，因此无效

define([
  'dijit/_WidgetBase',
  'dijit/_TemplatedMixin',
  'dijit/_WidgetsInTemplateMixin',
  // ...
], function (_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin) {
  return declare([ _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {
    // ...
  });
});