道場：和使用BorderContainer一個自定義的widget模板的內部工作不ContentPanes

嗨，我嘗試創建模板dijit.layout對象（使用BorderContainer，contentPane的）一些自定義的模板窗口小部件，而我只是不能得到它工作。也許是這樣可以引導我在正確的方向......這裏是到目前爲止我的代碼：道場：和使用BorderContainer一個自定義的widget模板的內部工作不ContentPanes

的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。

來源

2010-06-23 Dfowj

我MIXIN在我的自定義部件如下：

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

容器，您可以包含其他的dijits喜歡使用BorderContainer。模板化可讓您將小部件標記放在HTML模板中。 LayoutWidget允許您獲取所有dijit佈局並調整好東西。

如果您使用道場1.4的templatePath可/現在應該是：

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

在模板中，你需要一個頂級containerNode（這被通過窗口小部件創建道場解析器我想更換），所以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>

來源

2010-06-25 11:26:08 Andy

一個問題，你有什麼用dojoAttachPoints containerNode和subContainerNode呢？這definitly點我在正確的方向，它只是不相當的工作100％ – Dfowj 2010-06-25 13:59:32

我在小部件代碼中引用這些節點，例如啓動：功能（）{ this.subContainerWidget.startup（）; this.inherited（arguments）; }， Remeber調用調整大小和啓動和remeber繼承的版本來調用您的自定義窗口小部件的啓動。 – Andy 2010-06-25 16:20:16

道場：和使用BorderContainer一個自定義的widget模板的內部工作不ContentPanes

回答

相關問題