Hey guys, im trying to create some custom templated widgets with dijit.layout objects (BorderContainer, ContentPane) in the template, and i just can't get it to work. Maybe SO can steer me in the right direction... here's my code so far:
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 code-verbose post, but i dont know why it doesnt work so i can't really describe my problem in just words.
The jist is i want two panes, a 'left' (region='center' in this case) pane, and a 'right' pane that i can put widget content in. The above code simply renders the text in the divs with no panes at all.