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

Question

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

Dfo*_*owj 3 javascript dojo dijit.layout

嘿伙计们,我试图用模板中的dijit.layout对象(BorderContainer,ContentPane)创建一些自定义的模板化小部件,我只是无法让它工作.也许SO可以引导我走向正确的方向......到目前为止,这是我的代码:

的test.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>

Run Code Online (Sandbox Code Playgroud)

testWidget.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);
    }
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

对不起代码冗长的帖子,但我不知道为什么它不起作用所以我不能用言语真正描述我的问题.

jist是我想要两个窗格,一个'left'(在这种情况下是region ='center')窗格,以及一个'right'窗格,我可以将widget内容放入其中.上面的代码只是渲染div中的文本而没有窗格.

Answer 1

小智 8

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

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

Run Code Online (Sandbox Code Playgroud)

Container允许您包含BorderContainer等其他dijits.Templated允许您将小部件标记放在html模板中.LayoutWidget允许您获取所有dijit布局并调整大小.

如果您使用的是dojo 1.4,那么templatePath现在应该是:

templateString : dojo.cache("test", "testWidget.html")

Run Code Online (Sandbox Code Playgroud)

在你的模板中,你需要一个顶级的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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，4 月前
查看次数：	3567 次
最近记录：	15 年，4 月前