JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<link rel="stylesheet" href="http://archive.dojotoolkit.org/cdn/1.9.1-cdn/1.9.1/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://archive.dojotoolkit.org/cdn/1.9.1-cdn/1.9.1/dijit/themes/claro/claro.css">
<script src="http://archive.dojotoolkit.org/cdn/1.9.1-cdn/1.9.1/dojo/dojo.js"></script>
<form data-dojo-type="dojox/form/Manager" id="my_form">
    <fieldset dojo-attach-point="fields_a" id="fieldset_a" data-dojo-type="dijit/Fieldset">
        <legend>A</legend>
        <div data-dojo-type="dojox/layout/TableContainer" data-dojo-props="labelWidth: '30%'">
            <input data-dojo-type="dijit/form/TextBox" id="a_1" name="A_1" type="text" title="A1:" />
            <input data-dojo-type="dijit/form/TextBox" id="a_2" name="A_2" type="text" title="A2:" />
            <input data-dojo-type="dijit/form/TextBox" id="a_3" name="A_3" type="text" title="A3:" />
        </div>
    </fieldset>
    <fieldset dojo-attach-point="fields_b" data-dojo-type="dijit/Fieldset">
        <legend>B</legend>
        <div data-dojo-type="dojox/layout/TableContainer" data-dojo-props="labelWidth: '30%'">
            <input data-dojo-type="dijit/form/TextBox" id="b_1" name="B_1" type="text" title="B1:" />
            <input data-dojo-type="dijit/form/TextBox" id="b_2" name="B_2" type="text" title="B2:" />
            <input data-dojo-type="dijit/form/TextBox" id="b_3" name="B_3" type="text" title="B3:" />
        </div>
    </fieldset>
</form>

CSS

form  {
    display: inline-block;
}

fieldset {
    border: 1px solid #CCCCCC;
    margin: 1em;
    padding: 1em;
}

JavaScript

require(["lodash/lodash.compat", "dijit/registry", "dojo/query", "dojo/ready", "dojo/parser", "dojox/form/Manager", "dijit/Fieldset", "dijit/form/TextBox"], function (_, registry, query, ready) {
    ready(function () {
        var get_widget_descendants = function (parent_widget) {
            return _(query("[widgetid]", parent_widget.domNode))
                .map(registry.byNode)
                .value();
        };
        var widget = registry.byId("fieldset_a");
        var descendants = get_widget_descendants(widget);
        descendants.forEach(function (widget) {
            console.log(widget.id); // Form widget
        });
    });
});