Adding values to dijit/form/ComboBox

[MargaRaiz]

Hello!

I am learning wab and dojo and trying to load some values in a combo box that is defined in the widget.html:

widget.html:

           <select data-dojo-type="dijit/form/ComboBox" id="listcity" name="citycombo"> </select>

widget.js:

              node = dojo.byId("listcity");

              var elOptNew = document.createElement('option');
              elOptNew.text = "city1";
              elOptNew.value = 1;

              node.add(elOptNew);

              elOptNew = document.createElement('option');
              elOptNew.text = "city2";
              elOptNew.value = 2;

              node.add(elOptNew);

This works fine for me, but I think that there are other ways with the stores to do the same.. Any help?

Thanks in advance!

Marga

[RobertScheitlin__GISP]

Marga,

   All you need is to add the necessary requires and code:

Widget.js

...
'dojo/store/Memory',
...
],
 function(
...
Memory,
...

var cities = [
  {
    name: "city1",
    value: 1
  }, {
    name: "city2",
    value: 2
  }
];
myStore = new Memory({
    data: cities
});
this.citycombo.set('store', myStore);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Widget.html

<div data-dojo-attach-point="cityCombo" data-dojo-type="dijit/form/FilteringSelect"
 data-dojo-props="searchAttr:'name',intermediateChanges:true" class="dijit-form-FilteringSelect"></div>‍‍

[MargaRaiz]

Hi Robert!

Thanks for the quick answer, but this piece of code does not work 😞

Widget.js

define(['dojo/_base/declare',
'dojo/store/Memory',
'jimu/BaseWidget',
'dojo/dom'],
  function (declare, Memory, BaseWidget, dom) {
    //To create a widget, you need to derive from BaseWidget.
    return declare([BaseWidget], {
      // Custom widget code goes here

      baseClass: 'jimu-widget-mywidget',

       startup: function() {
        this.inherited(arguments);
        //this.mapIdNode.innerHTML = 'map id is:' + this.map.id;
        console.log('startup');

        var cities = [
            {
            name: "city1",
            value: 1
            },
            {
            name: "city2",
            value: 2
            }
            ];
         myStore = new Memory({data: cities});

        this.cityCombo.set('store', myStore);
        console.log('end');

       }    

    });
  });

widget.html

<div data-dojo-attach-point="cityCombo" data-dojo-type="dijit/form/FilteringSelect"
 data-dojo-props="searchAttr:'name',intermediateChanges:true" class="dijit-form-FilteringSelect"></div>

but.. when I tried from my app, I get this error in de firebug..

TypeError: this.cityCombo.set is not a function

this.cityCombo.set('store', myStore);

I have tried with "put" function, with "dom.byId" but I am not able to make it works.

Any idea?

Thanks!

Marga

[RobertScheitlin__GISP · Accepted solution]

Marga,

   When you use widgets in the html template you must include the require for _WidgetsInTemplateMixin and declare it as well in the Widget.js. You also need to require the specific dijit or widget that you are including in the template:

Widget.js: (lines 3,6,7,9)

define(['dojo/_base/declare',
'dojo/store/Memory',
'dijit/_WidgetsInTemplateMixin',
'jimu/BaseWidget',
'dojo/dom',
'dijit/form/FilteringSelect'],
  function (declare, Memory, _WidgetsInTemplateMixin, BaseWidget, dom) {
    //To create a widget, you need to derive from BaseWidget.
    return declare([BaseWidget, _WidgetsInTemplateMixin], {
      // Custom widget code goes here
      baseClass: 'jimu-widget-mywidget',
 
       startup: function() {
        this.inherited(arguments);
        //this.mapIdNode.innerHTML = 'map id is:' + this.map.id;
        console.log('startup');

        var cities = [
            {
            name: "city1",
            value: 1
            },
            {
            name: "city2",
            value: 2
            }
            ];
         myStore = new Memory({data: cities});

        this.cityCombo.set('store', myStore);
        console.log('end');
       }

    });
  });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Widget.html:

<div>
  <div data-dojo-attach-point="cityCombo" data-dojo-type="dijit/form/FilteringSelect"
   data-dojo-props="searchAttr:'name',intermediateChanges:true" class="dijit-form-FilteringSelect"></div>
</div>‍‍‍‍