Dijit combobox not rendering in custom widget

Question

I am trying to use the combobox provided by Dijit inside of a custom-made widget. I have been using Dojo's tutorial on comboboxes to guide me.

When I implement a stand-alone webpage similar to their tutorial examples, everything worked fine; but when I ported the code into my custom-made widget, it just renders the combobox as a plain HTML text box.

Here's what my custom widget's template looks like:

<div class='customWidget'>
    ...

    <div dojoAttachPoint="mainDiv" class="mainDiv">
        <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" url="states.txt"></div>

        <input dojoType="dijit.form.ComboBox"
               store="stateStore"
               value="California"
               searchAttr="name"
               name="state2" />

        <button dojoAttachEvent="onclick:chooseState">OK</button>
    </div>

    ...
</div>

In the widget code, I require the combobox and read store:

dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");

I also tried putting these includes in a <script/> within the custom widget (similar to the way they do it in the tutorial), but it didn't work (in fact, it appears as if the script tag wasn't even evaluated, since I couldn't reference a function I declared inside of it!)

Answer 1

Have you tried adding:

<script type="text/javascript">
    dojo.require("dojo.parser");
    dojo.addOnLoad(function(){
        dojo.parser.parse();
    });
</script>

(from Dojocampus) to ensure Dojo is parsing the page? Are there any errors in your Javascript console? Is the page rendering any normal Dojo widgets?

Answer 2

Do you have widgetsInTemplate in your widget declaration?

  dojo.declare('my.widget.Cool',[ dijit._Widget, dijit._Templated ], {

      widgetsInTemplate: true,

      // rest of widget JS here

   });

Here's an article about including other widgets in your template.