使用dojo dijit创建此3窗格布局不会呈现预期的效果

Question

我正在尝试创建一个3窗格布局的顶部，左侧和右侧（主要），如http://codepen.io/thiswayup/pen/raNWQE所示

我认为这个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>

小部件如下所示：

define([
    "dojo/_base/declare",
    "dojo/dom-class",
    "control/nls/Main",
    "dojo/text!./resources/Main.html",
    "dijit/_WidgetBase",
    "dijit/_TemplatedMixin",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane"
] , function (
    declare,
    domClass,
    l10n,
    mainTemplate,
    _WidgetBase,
    _TemplatedMixin
) {
    return declare("POC", [_WidgetBase, _TemplatedMixin], {
        l10n: l10n,

        templateString: mainTemplate,

        postCreate: function () {    
            this.inherited(arguments);
        }   });
});

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

<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>

问题是主（绿色）块转到下一个块，如下所示

Answer 1

您必须添加dijit/_WidgetsInTemplateMixin才能在模板中使用小部件：

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

另外，您的小部件HTML缺少结束</div>因此无效。

使用dojo dijit创建此3窗格布局不会呈现预期的效果

问题描述

1 个解决方案

解决方案1
0 2014-11-13 20:59:10

使用dojo dijit创建此3窗格布局不会呈现预期的效果

问题描述

1 个解决方案

解决方案1 0 2014-11-13 20:59:10

解决方案1
0 2014-11-13 20:59:10