我尝试创建一个顶部,左侧和右侧(主要)的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>
问题是主(绿色)块如下所示进入下一个块
答案 0 :(得分:0)
您必须添加dijit/_WidgetsInTemplateMixin
才能在模板中使用小部件:
define([
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
// ...
], function (_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin) {
return declare([ _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {
// ...
});
});
此外,您的小部件HTML缺少关闭</div>
,因此无效。