Dojo：“定制”窗口小部件内的布局窗口小部件

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"

Answer 1

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.

Answer 2

var dojoConfig = {
            async: true,
            parseOnLoad: false
}

parseOnLoad should be false