Javascript Dojo:BorderContainer和ContentPanes在自定义小部件模板中不起作用
我试图在模板中使用dijit.layout对象(BorderContainer、ContentPane)创建一些定制的模板小部件,但我就是无法让它工作。也许这样可以引导我走向正确的方向。。。以下是我目前的代码: test.htmlJavascript Dojo:BorderContainer和ContentPanes在自定义小部件模板中不起作用,javascript,dojo,dijit.layout,Javascript,Dojo,Dijit.layout,我试图在模板中使用dijit.layout对象(BorderContainer、ContentPane)创建一些定制的模板小部件,但我就是无法让它工作。也许这样可以引导我走向正确的方向。。。以下是我目前的代码: test.html <html> <head> <title>Test Page</title> <style type="text/css"> @import "http:
<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>
<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>
testWidget.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>
<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='center')窗格和一个“右”窗格,我可以将小部件内容放入其中。上面的代码只是在div中呈现文本,根本没有窗格。我在自定义小部件中混合了以下内容:
dijit.layout._LayoutWidget, dijit._Templated, dijit._Container
容器允许您包含其他DIJIT,如BorderContainer。
Templated允许您将小部件标记放入html模板中。
LayoutWidget允许您获得所有dijit布局和调整商品大小
如果您使用的是dojo 1.4,templatePath现在可以/应该是:
templateString : dojo.cache("test", "testWidget.html")
在模板中,您需要一个顶级containerNode(我认为在创建小部件时,它会被dojo解析器所取代),因此testWidget的模板将变成:
<div dojoAttachPoint="containerNode" style="height:100%;">
<div id="page" dojoType="dijit.layout.BorderContainer" liveSplitters="true" design='sidebar' style="height:100%;width:100%;" dojoAttachPoint="subContainerWidget">
<div dojoType="dijit.layout.ContentPane" region='center'>
test center
</div>
<div dojoType="dijit.layout.ContentPane" region='left' style="width:50%">
test left
</div>
</div>
考试中心
左测试
一个问题,您使用dojoAttachPoints containerNode和SubcainerNode的目的是什么?这明确地为我指明了正确的方向,只是没有100%正常工作我在我的小部件代码中引用了这些节点,例如startup:function(){This.subcainerwidget.startup();This.inherited(arguments);},记住调用继承版本的resize and startup,记住在自定义小部件上调用startup。