我尝试在模板中创建一些带有dijit.layout对象(BorderContainer,ContentPane)的自定义模板化小部件,但我就是不能让它工作。也许SO能指引我走上正确的方向......以下是我目前为止的代码:
测试.html
<html>
<head>
<title>Test Page</title>
<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/resources/dojo.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dijit/themes/tundra/tundra.css";
html, body, #page {
width: 100%; height: 100%; overflow: hidden;
}
</style>
<script type="text/javascript">
var djConfig = {
isDebug: false,
parseOnLoad: true,
baseUrl: './',
modulePaths: {'test' : '.'}
};
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.1/dojo/dojo.xd.js"></script>
<script type="text/javascript" src="test.js"></script>
<script>
dojo.require('dijit.layout.BorderContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('test.testWidget');
dojo.ready(function() {
var widget = new test.testWidget({}, 'widgetGoesHere');
});
</script>
</head>
<body class="tundra">
<div id='widgetGoesHere'></div>
</body>
</html>
测试小部件.js
dojo.provide('test.testWidget');
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.require('dijit.layout.BorderContainer');
dojo.require('dijit.layout.ContentPane');
dojo.declare('test.testWidget', [ dijit._Widget, dijit._Templated], {
templatePath: dojo.moduleUrl('test', 'testWidget.html'),
widgetsInTemplate: true,
postCreate: function() {
this.inherited(arguments);
}
});
测试小部件.html
<div id="page" dojoType="dijit.layout.BorderContainer" liveSplitters="true" design='sidebar' style="height:100%;">
<div dojoType="dijit.layout.ContentPane" region='center'>
test center
</div>
<div dojoType="dijit.layout.ContentPane" region='left' style="width:50%">
test left
</div>
</div>
对不起,相当代码冗长的职位,但我不知道 * 为什么 * 它不工作,所以我不能真正描述我的问题只是文字。
jist是我想要两个窗格,一个“左”(在本例中,region =“中心”)窗格,和一个“右”窗格,我可以在其中放置小部件内容。上面的代码只是在没有窗格的div中呈现文本。
1条答案
按热度按时间8i9zcol21#
我在我的自定义小部件中混合了以下内容:
Container允许你包含其他dijit,比如BorderContainer。Templated允许你把你的小部件标记放在一个html模板中。LayoutWidget允许你得到所有dijit的布局和调整大小。
如果您使用的是dojo 1.4,templatePath现在可以/应该是:
在您的模板中,您需要一个顶级的containerNode(我认为在创建小部件时它会被dojo解析器所取代),因此testWidget的模板将变为: