dojo: using registry.byID returns "undefined"

Question

I have problems to retrieve a button-widget with dojo/registry.

I have a widget and inside it's postCreate-function some other functions are called. In the last one registry.byId() returns "undefined" causing an error. The element with the provided id does exist in the html-template.

I have also created an very simple working version in JSFiddle and even if I try this variant in my code I get "undefined". EDIT: updated Fiddle

Here is a short summary of the code with the original use of registry.byId() in the _setupButton-function and also with the solution from the JSFiddle before the declare-part. Both versions return "undefined":

define(["dojo/_base/declare", "dojo/_base/array", "dojo/_base/lang", "dojo/dom-class", "dojo/number", "dojo/parser", "dojo/ready", "dojo/dom-construct", "dijit/registry", "dijit/form/NumberTextBox", "dijit/_Widget", "dijit/_TemplatedMixin", "dijit/Menu", "dijit/MenuItem", "dojo/text!./templates/template.html"],
function(declare, array, lang, domClass, number, parser, ready, domconstruct, registry, NumberTextBox, _Widget, _TemplatedMixin, Menu, MenuItem, templateStringContent) {

parser.parse();
ready(function () {
     console.info(registry.byId("startCalculationButton"));
});

return declare([_Widget, _TemplatedMixin],
{
    templateString: templateStringContent,

    postCreate() {
       this._setupButton();
    },
    _setupButton: function() {
       buttonWidget = registry.byId("startCalculationButton");
       buttonWidget.set("disabled", true);
    },
});

});

The html is the same as in the provided JSFiddle-Snippet. Other id's (for toher elements) also won't work. So why registry.byId() possibly won't work for me? I'm new to AMD-style and the code already worked with the old syntax using dijit.byId.

Edit:

I figured out that the widget is not registered in the registry-object. What could be the reason for that? If the template could not be found I would get a error 404, so this reason we can exclude.

Edit2:

Also document.getElementById() will just return null. I thought passing the templateString would be enough and dojo does everything else?

Answer 1

According to the dojo documentation the widget needs besides _TemplatedMixin also _WidgetsInTemplateMixin and inherit from it:

But what if we want to have a widget inside of the template, as in:

<div class="combinedDateTime">
   <div data-dojo-type="dijit/form/DateTextBox"></div>
   <div data-dojo-type="dijit/form/TimeTextBox"></div>
</div>

When using this template in a directly extended widget class, you will need to mixin dijit._WidgetsInTemplateMixin in addition to dijit._TemplatedMixin.

Since the dijit-button will be a widget inside my template so adding _WidgetsInTemplateMixin and inheriting from it solved my problem without the need of other changes. My code looks now something like this (shortened):

define(["dojo/_base/declare", "dijit/registry", "dijit/_Widget", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", "dojo/text!./templates/template.html"],
function(declare, registry, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin, templateStringContent) {

return declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin],
{
    templateString: templateStringContent,

    postCreate() {
       this._setupButton();
    },
    _setupButton: function() {
       buttonWidget = registry.byId("startCalculationButton");
       buttonWidget.set("disabled", true);
    },
});

Answer 2

I noticed that there are something that might be needing specific concern in your code:

require([
    "dojo/ready",
    "dijit/registry"
], function(
    ready,
    dijitRegistry
) {
    ready( function() {
        var grid = dijitRegistry.byId("startCalculationButton");
        console.info(grid)
        grid.set("disbaled", true);
    });
});

I think it should be: require(["dojo/ready", "dijit/registry"], function(ready, registry) { ... } and then you may use registry.byId("somename")

if you are using dgrid/extensions/DijitRegistry on your require syntax, then you shall include DijitRegistry after your require syntax (kindly remind, it is case-sensitive), but based on my experience, I only used this for dgrid mixin...

Hope this can help...