So I had always hoped to avoid the whole dojo universe. The JSAPI 4.x seems to more and more inoculate against the inner workings of whatever dojo its using. But now, I'm trying to build some custom WAB widgets and see myself having unscramble some of this dojo stuff. i got a 2-part question, and question subject refers to only part 2.
Part 1
Robert Scheitlin, GISP had some advice suggesting to work with dojo attachments points, as in ...
<input data-dojo-attach-point="myButton" type="button" value="Click Here">
so that in my code I could refer to this element in widget.html simply as this.myButton.
But I'm still not sure when to use the above or - provided I have added id = 'myButton', use this;
dom.byId("myButton")
I see folks using them almost interchangeably through this forum and elsewhere. Are there some simple guiding principles?
Part 2
Now for the Select. I'm making a call to a web service, ignoring geometry and just returning the feature's name. Then I populate a <select> with that, which I have called:
<select id='results' data-dojo-attach-point='results' data-dojo-type="dijit/form/Select"></select>
The following code populates a bunch of entries (or <option>'s) in that <select> with records from the service.
//Interate over features in featureset
//find desired feature attribute's value
{
var c = document.createElement('option');
c.innerHTML = myAttributeValue;
c.value = i;
this.results.appendChild(c); // 'results' being my dojo attach point
}
Next, I would like to use the dijit's event listener to watch if one of those <options>'s is selected. Again, ...
on(this.results,"change",lang.hitch(this, function(evt){
console.log(this.results);
The above gets me a reference to the <select> but no attempt - such as ".value",".displayValue", "_getDisplayedValueAttr()" or ".selected" has been successful in getting me the value that's selected, and I've scoured the Dojo site for info. I can iterate over this.results.options and check the attribute selected for each one, but is there a simpler way? Thanks.
Solved! Go to Solution.
Arne,
this.bufferUnits.get('value')
to add the options in code you use code like this:
var options = [];
var len = this.config.bufferDefaults.bufferUnits.bufferUnit.length;
for (var i = 0; i < len; i++) {
var option = {
value: this.config.bufferDefaults.bufferUnits.bufferUnit[i].name,
label: this.config.bufferDefaults.bufferUnits.bufferUnit[i].label
};
options.push(option);
if (i === 0) {
options[i].selected = true;
}
}
this.bufferUnits.addOption(options);
Arne,
this.bufferUnits.get('value')
to add the options in code you use code like this:
var options = [];
var len = this.config.bufferDefaults.bufferUnits.bufferUnit.length;
for (var i = 0; i < len; i++) {
var option = {
value: this.config.bufferDefaults.bufferUnits.bufferUnit[i].name,
label: this.config.bufferDefaults.bufferUnits.bufferUnit[i].label
};
options.push(option);
if (i === 0) {
options[i].selected = true;
}
}
this.bufferUnits.addOption(options);
define(['dojo/_base/declare', 'jimu/BaseWidget', 'dijit/_WidgetsInTemplateMixin', [...] "dojo/_base/lang", "dojo/on", "dojo/dom", "dijit/form/Select"], function(declare, BaseWidget, _WidgetsInTemplateMixin, [...] lang, on, dom, Select)
return declare([BaseWidget, _WidgetsInTemplateMixin], {
The way I have my Selects set up is like this on the html page:
<div data-dojo-attach-point="sourceLayerFieldSelect" class="esriCTDownloadTabTextbox"
data-dojo-type="dijit/form/Select" data-dojo-props="required:true,trim:true,disabled:true">
</div>
This Select is populated with fields from a feature layer using information stored in an array of field infos (availableCategoryFieldInfos). This code first empties the Select of previous fields, adds the fields, then sets the display to empty so it doesn't have a field already selected.
this.sourceLayerFieldSelect.removeOption(
this.sourceLayerFieldSelect.getOptions()
);
array.forEach(availableCategoryFieldInfos, lang.hitch(this, function (fieldInfo) {
const option = {
value: fieldInfo.name,
label: fieldInfo.alias
};
this.sourceLayerFieldSelect.addOption(option);
}));
this.sourceLayerFieldSelect._setDisplay("");
I set up a listener for its change event like this:
this.own(
on(this.sourceLayerFieldSelect, "change", lang.hitch(this, this._onPrioritizationFieldSelectChange))
);
And I get the selected option using this syntax:
this._priorityField = this.sourceLayerFieldSelect.value;
Thanks for sharing, Ken. At first glance, it looks very similar to what I had.
You have a <div> with a dojo-attach point. I had a <select>. If I drop mine for the div, I love my scrollbar.
I was setting up my options like this:
var c = document.createElement('option'); this.results.appendChild(c);
You used removeOption(), I had:
while (this.results.firstChild) { this.results.removeChild(this.results.firstChild); };
If I try
option = {value: myAttrVal, label: myAttr} this.results.addOption(option);
I get
init.js:115 TypeError: this.results.addOption is not a function
if I keep my createElement/appendChild,instead of addOption, I end up with:
init.js:115 TypeError: this.results._setDisplay is not a function
I'll take another look at Robert's to make sure I am working with a "real' dojo dijit. -- I have a stack of dojo books on my desk...I think I need to spend a week just reading them. haha.
Where do you lose your scrollbar? In the Select dijit itself? Or somewhere else?
Can you post your html?
Ken,
Here is my very stripped down HTML.
<input data-dojo-type="dojox/mobile/SearchBox" data-dojo-attach-point="siteSearch" type="search" placeHolder="Search"> <input data-dojo-attach-point="searchBtn" type="button" value="Search for this Wellsite "> <select data-dojo-attach-point="results" class="text-box-scroll" data-dojo-type="dijit/form/MultiSelect"></select>
It is working fine until l make Robert's suggested change of adding _WidgetsInTemplateMixin to the declare. I suspect I'm still not setting my dojo elements up correctly and just adding that dojo-attach point is not sufficient. Time to read up on Dojo, I guess.
So you're using MultiSelect rather than Select?
I had to back several iterations after jacking up all my widiget code. Originally, I had MultiSelect in there. But I've switched again to Select.
I spent a lot of time yesterday reading up on dojo vs dom ways to interact with the page elements. For example,..
That cleared up some misunderstanding. Now, I have figured out how to create my elements programmatically and placing them inside elements identified with data-dojo-attach-point. The question I'm trying to answer now is whether i can create a new elements and set a data-dojo-attach-point programmatically. But I'll move that line of questioning into a more focused thread. Thanks to both of you for chiming in so patiently.