CODEWITHSUNDEEP
javascriptdojodijit.form
Cameron Kilgore
Cameron Kilgore

Reputation: 423

Programmatically declaring the values of a dijit.form.select

I'm trying to declare through a JSON declaration the options for a markup-declared dijit.form.Select widget. Based on what i've read through in the API documentation, it appears that you could pass a new store using setStore() and then it should update, but that has not produced any useful results besides an empty Select widget with a full store. I am wondering if there's some declaration missing from my object, if i'm using the wrong methods, or if there are any other ways to declare these options.

The test markup I've been using is printed below:

<!DOCTYPE HTML>
<html dir="ltr">

    <head>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
        djConfig="parseOnLoad: true">
        </script>
        <script>
            dojo.require("dijit.form.Select");
            dojo.require("dojo.data.ItemFileReadStore");
            dojo.require("dojo.data.ItemFileWriteStore");
        </script>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
    </head>

    <body class=" claro ">

        <div class="option" id="option" dojoType="dijit.form.Select"></div>

        <script type="text/javascript">
            dojo.addOnLoad(function() {
                if (document.pub) {
                    document.pub();
                }

                var selectOptions = {
                    name:'selection', 
                    identifier: 'label',
                    options: [{
                        label: 'this',
                        value: '01'
                    },
                    {
                        label: 'that',
                        value: '02'
                    },
                    {
                        label: 'the other',
                        value: '03'
                    },
                    {
                        label: 'banana',
                        value: '04',
                    },
                    ]};

                    var aStore = dojo.data.ItemFileReadStore({data: selectOptions});
                    dijit.byId("option").setStore(aStore, 01);
                    dijit.byId("option").startup();

            });
        </script>
    </body>

</html>

Upvotes: 3

Views: 6223

Answers (2)

BuffaloBuffalo
BuffaloBuffalo

Reputation: 7852

As @missingno mentioned, using a store for this is probably overkill. You can just use

dijit.form.select.addOption(/*array of options*/).

From your example it would be:

var listOfOptions = [{
    label: 'this',
    value: '01'
  },
  {
    label: 'that',
    value: '02'
  },
  {
    label: 'the other',
    value: '03'
  },
  {
    label: 'banana',
    value: '04',
  },
  ];
dijit.byId("option").addOption(listOfOptions);

Upvotes: 7

hugomg
hugomg

Reputation: 69964

I think you are miss-initializing your store. The options look like the ones used to initialize the plain select instead. Try doing something like:

http://dojotoolkit.org/reference-guide/dojo/data/ItemFileReadStore.html

var store_options = {
    identifier: 'label',
    label: 'label',
    items: [
        {label: 'this', value:'01'},
        //...
    ]
}

var store = dojo.data.ItemFileWriteStore({data: store_options})

OTOH, are you sure you need to use a store for this? Unless you want to use a particular store feature (like notification) you can just pass the data directly when you create a select programatically: http://dojotoolkit.org/reference-guide/dijit/form/Select.html

Upvotes: 2

Related Questions