Dojo:BorderContainer和ContentPanes在自定义小部件模板中不起作用

bwntbbo3  于 2022-12-08  发布在  Dojo
关注(0)|答案(1)|浏览(169)

我尝试在模板中创建一些带有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中呈现文本。

8i9zcol2

8i9zcol21#

我在我的自定义小部件中混合了以下内容:

dijit.layout._LayoutWidget, dijit._Templated, dijit._Container

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>

相关问题