javascriptdojopopupgistabcontainer

Pop-up with tab container


I am attemtping to call a dojo tab container within an ESRI pop-up. The code that I have (see below) is able to create a pop-up with a tab container and the contents, but also creates three 'dead' dropdown menus. Is there a way to create the pop-up without the dropdown menus?

var map;
var resizeTimer;
var identifyTask,identifyParams;

function init() {        
  //setup the popup window 
  var popup = new esri.dijit.Popup({
    fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
  }, dojo.create("div"));
  map = new esri.Map("map",{
    infoWindow:popup,
  });
  dojo.connect(map,"onLoad",mapReady);
  //Add the imagery layer to the map. View the ArcGIS Online site for services
  //http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
  var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
  map.addLayer(basemap);
  var landBaseLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://<someServer>/ArcGIS/rest/services/test/MapServer");
  map.addLayer(landBaseLayer)
}

function mapReady(map) {
  dojo.connect(map,"onClick",executeIdentifyTask);
  //create identify tasks and setup parameters 
  identifyTask = new esri.tasks.IdentifyTask("http://<someServer>/ArcGIS/rest/services/test/MapServer");
  identifyParams = new esri.tasks.IdentifyParameters();
  identifyParams.tolerance = 3;
  identifyParams.returnGeometry = true;
  identifyParams.layerIds = [0];
  identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL;
  identifyParams.width  = map.width;
  identifyParams.height = map.height;
  //resize the map when the browser resizes
  dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
}

function executeIdentifyTask(evt) {
  identifyParams.geometry = evt.mapPoint;
  identifyParams.mapExtent = map.extent;
  var deferred = identifyTask.execute(identifyParams);
  deferred.addCallback(function(response) {     
    // response is an array of identify result objects    
    // Let's return an array of features.
    return dojo.map(response, function(result) {
      var feature = result.feature;
      feature.attributes.layerName = result.layerName;
      console.log(feature.attributes.OBJECTID);
      var template = new esri.InfoTemplate();
      template.setTitle("</b>Hello World</b>");
      template.setContent(getWindowContent);
      feature.setInfoTemplate(template);
      return feature;
    });
  });

  // InfoWindow expects an array of features from each deferred
  // object that you pass. If the response from the task execution 
  // above is not an array of features, then you need to add a callback
  // like the one above to post-process the response and return an
  // array of features.
  map.infoWindow.setFeatures([ deferred ]);
  map.infoWindow.show(evt.mapPoint);
}

function getWindowContent(graphic) {
  //make a tab container 
  var tc = new dijit.layout.TabContainer({ });
  return tc.domNode;
}

dojo.addOnLoad(init);

Solution

  • It appears changing the TabContainer code to the following will fix the issue:

    var tc = new dijit.layout.TabContainer({
                style: "width:100%;height:100%;",
                useMenu: false,
                useSlider: false,
            }, dojo.create('div'));