Dojo declarative vs. programmatic creation of Select elements with stores

http://stackoverflow.com/questions/12782976/dojo-declarative-vs-programmatic-creation-of-select-elements-with-stores

by phusick

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<select
    id="select1"
    data-dojo-type="dijit/form/Select"
    data-dojo-props="disabled:true"
    style="width:150px;"
>
    <option>Loading...</option>
</select>

CSS

body {
    padding: 30px;
}

JavaScript

require([
    "dojo/ready",
    "dijit/registry",
    "dojo/store/Memory",
], function(
    ready,
    registry,
    Memory
) {
    
    ready(function() {

        var store1 = new Memory({
            idProperty: "value",
            data: [
                {
                    value: "AL",
                    label: "Alabama"
                },
                {
                    value: "AK",
                    label: "Alaska"
                },
                {
                    value: "AZ",
                    label: "Arizona"
                }
            ]           
        });
        
        var select1 = registry.byId("select1");
        
        // simulate slowness
        setTimeout(function() {        
            select1.set("labelAttr", "label");
            select1.setStore(store1);
            select1.set("disabled", false);
            select1.watch("value", function(name, oldValue, newValue) {
                console.log(newValue);            
            });
        }, 3000);
        

    });
    
});