I am currently importing the Select Widget that comes with Arcgis WAB into another custom widget. While using dojo/_base/lang html.place() I have noticed that the selectDijitNode and layerItemsNode were being placed in the custom widget irrespective of the format and tabs that I would put them in. The Select and Clear Selection buttons are placed on top of the other html elements making the view very unattractive. I tried putting a .watch() handler on the tabContainer and hiding the element when not on the correct tab, but when I set the display value from block to hide the tabs get destroyed. Is anyone familiar with a programmatic way to place and populate the node while respecting the tab format?
_initLayers: function(layerInfoArray) {
this.layerInfoArray = layerInfoArray;
this.layerItems = [];
this.selectionSymbols = {};
html.empty(this.layerItemsNode);
array.forEach(
layerInfoArray,
lang.hitch(this, function(layerInfo) {
var visible = layerInfo.isShowInMap() && layerInfo.isInScale();
var item = new SelectableLayerItem({
layerInfo: layerInfo,
checked: true,
layerVisible: visible,
folderUrl: this.folderUrl,
allowExport: this.config ? this.config.allowExport : false,
map: this.map,
nls: this.nls
});
this.own(
on(item, "switchToDetails", lang.hitch(this, this._switchToDetails))
);
this.own(
on(
item,
"stateChange",
lang.hitch(this, function() {
//this.shelter.show();
this._getSelectableLayers().then(
lang.hitch(this, function(layerObjects) {
this.selectDijit.setFeatureLayers(layerObjects);
//this.shelter.hide();
})
);
})
)
);
// Note, this is the line referenced above
html.place(item.domNode, this.layerItemsNode);
item.startup();
this.layerItems.push(item);
})
);
<div data-dojo-type="dijit/layout/BorderContainer">
<div style="height: 500px;">
<div data-dojo-type="dijit/layout/TabContainer" doLayout="true" id="tabContainer">
<div data-dojo-type="dijit/layout/ContentPane" title="Create Filter" id="filtTab" data-dojo-props="selected:true">
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Select Filter" id="selectTab">
<div>
<div class="layer-node" data-dojo-attach-point="layerListNode">
<div>
<div id="selectBTN" class="select-dijit-container" data-dojo-attach-point="selectDijitNode" </div>
<div class="seperator"></div>
</div>
<div class="layer-nodes">
<div class="layer-items" data-dojo-attach-point="layerItemsNode"></div>
</div>
</div>
<div class="details-node" data-dojo-attach-point="detailsNode">
<div class="header">
<div class="switch-back jimu-float-leading" data-dojo-attach-point="switchBackBtn">
<div class="feature-action" data-dojo-attach-point="switchBackIcon"></div>
</div>
<div class="layer-name jimu-ellipsis" data-dojo-attach-point="selectedLayerName"></div>
</div>
<div class="content" data-dojo-attach-point="featureContent">
</div>
</div>
</div>
</div>
</div>
