文章/答案/技术大牛

发布

社区首页 >问答首页 >Dojo: BorderContainer和ContentPanes在自定义小部件模板中不工作

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

Stack Overflow用户

提问于 2010-06-23 14:37:14

回答 1查看 3.7K关注 0票数 2

我试图在模板中创建一些带有dijit.layout对象(BorderContainer，ContentPane)的定制模板小部件，但我无法让它正常工作。也许这样可以引导我朝着正确的方向..。到目前为止，这是我的代码：

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>

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

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>

很抱歉发表了一些代码冗长的文章，但是我不知道为什么它不能工作，所以我不能用语言来描述我的问题。

jist是我想要的两个窗格，一个‘左侧’(在本例中是区域=‘中间’)窗格，和一个‘右’窗格，我可以将小部件内容放入其中。上面的代码只是将文本呈现在div中，根本没有窗格。

dijit.layout

javascript

dojo

回答 1

Stack Overflow用户

回答已采纳

发布于 2010-06-25 11:26:08

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

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

容器允许您包含其他dijit，如BorderContainer。模板化允许您将小部件标记放在html模板中。LayoutWidget允许您获得所有的dijit布局和调整大小的好东西。

如果您使用的是Dojo1.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>

票数 8

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/3102594

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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