Dojo : Layout widgets inside the Custom widget

Question

I have a Custom dojo widget with dojo layout widgets

template as below

<div>
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" id="mainPanel" style="padding: 0px">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', splitter:false"  style="padding: 0px">
            Saartha Labs Pvt Ltd
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top', gutters: false, splitter:false"  style="padding: 0px" >
            <div id="toolBar"></div>
        </div>
        <div id="map-div"  data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:false"></div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:false" style="display: none" ></div>
    </div>
</div>

and the Custom Widget as below "Canvas.js"

define([
    "dojo/_base/declare",
    "dijit/_WidgetBase",
    "dijit/_WidgetsInTemplateMixin",
    "dijit/_OnDijitClickMixin",
    "dijit/_TemplatedMixin",
    "dojo/text!./canvas.html",

    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane"
], function (declare, _WidgetBase,_WidgetsInTemplateMixin, _OnDijitClickMixin,_TemplatedMixin, template) {

    return declare([_WidgetBase,_OnDijitClickMixin, _TemplatedMixin,_WidgetsInTemplateMixin], {
        templateString: template
        //  your custom code goes here

    });

});

When use try to use the Canvas with new it throws a error as below.

require([
        "bhuvi/canvas/Canvas",
        "dojo/domReady!"],
            function(Canvas){
                var canvas = new Canvas();
                canvas.placeAt(window.document.body);
            });

Error as

"Tried to register widget with id==mainPanel but that id is already registered"

This error occurs, when you try to register a widget ( in this case the BorderContainer ) twice, while it's in first instance still, how should i say, alive. Have you checked if your widget isn't build double? — MiBrock
this is test code.. so its not initializing twice.. according to doc we can not put the layout widgets inside the template.. — chiranjeevigk
I don't see a reason why one shouldn't use layout widgets in the templates, quite the opposite. Just make sure you don't initialize the widget twice (from markup maybe?) and be careful with those ID's as per answer below. — belzebu
From the api doc [link] dojotoolkit.org/reference-guide/1.9/dijit/… The dijit._WidgetsInTemplateMixin mixin does not support adding layout widgets as children. In particular there are issues with startup() and resize() calls to the children. — chiranjeevigk

g00glen00b g00glen00b · Accepted Answer · 2014-07-14T07:00:55

Never use IDs in your widget templates. IDs must be unique, so unless your ID is dynamically generated (which isn't in this case), your ID won't be unique if you create multiple instances of your widget.

In stead of that, use the data-dojo-attach-point mechanism, for example:

<div>
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false"
        data-dojo-attach-point="mainPanel" style="padding: 0px">
        <!-- Rest of the code -->
    </div>
</div>

Now you can use this.mainPanel if you need access to that widget.

Even if you don't create multiple instances of your widget, you're still better off by using the attach points, you never know what happens behind the screens.

A small side note: Layout widgets are not officially supported by the dijit/_WidgetsInTemplateMixin mixin, so be careful when using them. However, this is not the cause of your problem.

Dojo : Layout widgets inside the Custom widget

2 Answers