Geek Answers Handbook

Dojo: BorderContainer and ContentPanes do not work inside custom widget template

Hi guys, I'm trying to create some custom template widgets with dijit.layout objects (BorderContainer, ContentPane) in a template, and I just can't get it to work. Maybe SO can direct me in the right direction ... here is my code:

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>

Sorry for the rather detailed code, but I don’t know why it doesn’t work, so I can’t describe my problem in simple words.

There are two panels in jist, an area on the left (area = "center" in this case) and a "right" panel in which I can put the contents of the widget. The above code just displays text in windowless divs.

+3
source share
1 answer

I mix the following in my custom widgets:

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

The container allows you to contain other digits, such as BorderContainer. Templated allows you to place widget layout in an html template. LayoutWidget allows you to get all DJ layouts and change properties.

If you are using dojo 1.4, templatePath may / should now be:

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

In your template, you need the top level containerNode (this is replaced by the dojo parser to create the widget, I think), so the testWidget template will be as follows:

 <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
source

More articles:


All Articles