infoWindow custom html + tabs

Question

Hey, Building off of the infoWindow with tabs example. Currently I am dynamically building some tabs, e.g.:var tc = new dijit.layout.TabContainer({ style : "width:100%;height:250px;" }, dojo.create('div')); forEach(myData,function(data){ var cp1 = new dijit.layout.ContentPane({ title: "A title"}); cp1.setContent(layerTabContent(data)); // create an html table from data for tab content tc.addChild(cp1); }); The above works fine (though is really ugly, later I have to find the CSS that drives the tabs). I can take an infoWindow template:template.setContent(tc.domNode); graphic.setInfoTemplate(template); and these generated tabs show in the infoWindow. Now above these tabs I want an header of information for that point, e.g. address info:var html = '

'; html += '

' + feature.attributes["Address"] + '
'; html += '

'; if I were to setContent simply as this html that would work find, e.g.:template.setContent(html); graphic.setInfoTemplate(template); However, the issue is how to combine the tc.domNode with the html, since they are currently of different object types. Thoughts? Thanks!

VinayBansal · Accepted Answer

Use border container
 var bc = new dijit.layout.BorderContainer({                     style: "height: 220px; width: 310px;overflow:hidden;"                 });  var cp1 = new dijit.layout.ContentPane({                         region: "top",                         content: <HTML_STRING>                     });  bc.addChild(cp1); //tc is your tab container  var cp2 = new dijit.layout.ContentPane({                         region: "center",                         content: tc.domNode                     });                     bc.addChild(cp2);   tc.startup();                     bc.startup(); this.map.infoWindow.setContent(bc.domNode);                     this.map.infoWindow.onShow = null;                     //var bc = this.resultBorderContainer;                     dojo.connect(this.map.infoWindow, "onShow", function () {                         if (tc != undefined && bc != null) {                             bc.resize();                             tc.resize();                         }                     });