Zend Dojo comboBox not finding dojo.data

Question

I am trying to get a dojo comboBox working in Zend, with the following code:

$url = '/db/autocomplete/table/suburbs';
$element = new Zend_Dojo_Form_Element_ComboBox('suburb1');
$element->setStoreId('suburbsStore');
$element->setStoreType('dojo.data.ItemFileReadStore');
$element->setStoreParams(array('url' => $url));
$element->setDijitParam('searchAttr', 'name');

and the output is this javascript (I've reformatted it a bit):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js"></script>

<script type="text/javascript">//<![CDATA[
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.parser");
dojo.addOnLoad(function() {
    dojo.forEach(zendDijits, function(info) {
        var n = dojo.byId(info.id);
        if (null != n) {
            dojo.attr(n, dojo.mixin({ id: info.id }, info.params));
        }
    });
    dojo.parser.parse();
});
var suburbsStore = new dojo.data.ItemFileReadStore({"url":"\/db\/autocomplete\/table\/suburbs"});
var zendDijits = [
    {"id":"suburb1","params":{
        "store":"suburbsStore",
        "searchAttr":"name",
        "dojoType":"dijit.form.ComboBox"}
    },
    {"id":"suburb2","params":{
        "store":"suburbsStore",
        "searchAttr":"name",
        "dojoType":"dijit.form.ComboBox"}
    }
];
//]]></script>

and this HTML (with extraneous stuff removed):

<input options="" id="suburb1" name="suburb1" value="" type="text" />
<input options="" id="suburb2" name="suburb2" value="" type="text" />
<input type="submit" />

and the error I'm getting is dojo.data is undefined on the var suburbsStore = new dojo.data.ItemFileReadStore(...) line. Surely that call is after dojo.require("dojo.data.ItemFileReadStore"); and so should be fine?! But obviously I'm missing something.

Thank you!

Answer 1

When you are using cross-domain dojo (in your case Google CDN), dojo.require works asynchronously, so I think the problem is that you are trying to create instance of ItemFileReadStore before it is actually available. You should move your code (var suburbsStore = new dojo.data.ItemFileReadStore...) into dojo.addOnLoad handler, because it is guaranteed to be fired when all modules are available. You can read about differences between normal and xdomain loaders here.