Hi all,I'm trying to use a TabContainer in my own InfoWindow and it doesn't work. I'll show my code. I'm using dojo toolkit 1.6
--------------------- My InfoWindow.js----------------------
dojo.provide("gvdi.InfoWindow");
dojo.require("esri.InfoWindowBase");
dojo.require("dojo.fx");
/***************
* MyInfoWindow
***************/
dojo.declare("gvdi.InfoWindow", [ esri.InfoWindowBase ], {
constructor: function(parameters) {
dojo.mixin(this, parameters);
isContentShowing: false;
isContentShowing: true;
isMouseOver: false;
isMouseClick: false;
dojo.addClass(this.domNode, "myInfoWindow");
this._closeButton = dojo.create("div", { "class": "close", title: "Cerrar" }, this.domNode);
this._title = dojo.create("div", { "class": "title" }, this.domNode);
this._content = dojo.create("div", { "class": "content" }, this.domNode);
this._toggleButton = dojo.create("div",{"class": "toggleOpen", title:"Expandir"},this.domNode);
var toggler = new dojo.fx.Toggler({
node: this._content,
showFunc: dojo.fx.wipeIn,
hideFunc: dojo.fx.wipeOut
});
toggler.hide();
this._eventConnections = [
dojo.connect(this._closeButton, "onclick", this, function(){
this.hide();
//hide the content when the window is closed so it displays in closed state next time it opens.
if(this.isContentShowing){
toggler.hide();
this.isMouseOver = false;
this.isMouseClick = false;
this.isContentShowing = false;
dojo.removeClass(this._toggleButton);
dojo.addClass(this._toggleButton,"toggleOpen");
}
}),
dojo.connect(this._toggleButton,"onclick",this,function(){
//animate the display of content
if(this.isContentShowing){
toggler.hide();
this.isContentShowing = false;
dojo.removeClass(this._toggleButton);
dojo.addClass(this._toggleButton,"toggleOpen");
}else{
toggler.show();
this.isContentShowing=true;
dojo.removeClass(this._toggleButton);
dojo.addClass(this._toggleButton,"toggleClose");
}
})
];
// Hidden initially
esri.hide(this.domNode);
this.isShowing = false;
},
/*****************************************
* Override and implement methods defined
* by the base class: InfoWindowBase
*****************************************/
setMap: function(map) {
// Run logic defined in the base class
this.inherited(arguments);
// hide the info window when the user is focusing elsewhere.
this._eventConnections.push(dojo.connect(map, "onPanStart", this, this.hide));
this._eventConnections.push(dojo.connect(map, "onZoomStart", this, this.hide));
},
setTitle: function(title) {
this.place(title, this._title);
},
setContent: function(content) {
this.place(content, this._content);
},
show: function(location) {
// Is location specified in map coordinates?
if (location.spatialReference) {
location = this.map.toScreen(location);
}
// Position 10x10 pixels away from the
// requested location
dojo.style(this.domNode, {
left: (location.x + 16) + "px",
top: (location.y + 16) + "px"
});
// Display
esri.show(this.domNode);
this.isShowing = true;
this.onShow();
},
hide: function() {
esri.hide(this.domNode);
this.isMouseClick = false;
this.isShowing = false;
this.onHide();
},
resize: function(width, height) {
dojo.style(this._content, {
width: width + "px",
height: height + "px"
});
dojo.style(this._title,{
width: width + "px"
});
},
/************************************
* Defining some methods specific to
* my info window
************************************/
destroy: function() {
dojo.forEach(this._eventConnections, dojo.disconnect);
dojo.destroy(this.domNode);
this.isMouseClick = false;
this._closeButton = this._title = this._content = this._eventConnections = null;
},
mostrarExtendido: function(){
esri.show(this._content);
this.isContentShowing=true;
dojo.removeClass(this._toggleButton);
dojo.addClass(this._toggleButton,"toggleClose");
},
setMouseOver: function(mouseOver) {
this.isMouseOver = mouseOver;
},
getMouseOver: function() {
return this.isMouseOver;
},
setMouseClick: function(mouseClick) {
this.isMouseClick = mouseClick;
},
getMouseClick: function() {
return this.isMouseClick;
},
mostrarReducido: function(){
esri.hide(this._content);
this.isContentShowing=false;
dojo.removeClass(this._toggleButton);
dojo.addClass(this._toggleButton,"toggleOpen");
}
});
--------------------------- End InfoWindow.js--------------------------
function insertIncident(id,tactica,xPos,yPos,estado,areaOp){
var geo = new esri.geometry.Point(xPos,yPos,new esri.SpatialReference({ wkid: 25830 }));
var ip = new esri.Graphic(geo, null);
var attr = {"xPos":xPos,"yPos":yPos,"id":id,"tactica":tactica,"estado":estado,"areaOp":areaOp};
ip.setAttributes(attr);
var infoTemplate = new esri.InfoTemplate("${id}  ","" +
"<strong>ID:</strong> ${id}<br/>" +
"<strong>Tactica:</strong> ${tactica}<br/>" +
"<strong>Area op:</strong> ${areaOp}<br/>");
ip.setInfoTemplate(infoTemplate);
//TODO: cambiar la gestion del icono a constantes java
var icon = "";
if (estado == "ACT")
icon = "./images/icons/incidverde.png";
else if (estado == "TACT")
icon = "./images/icons/incidgris.png";
else if (estado == "APER")
icon = "./images/icons/incidrojo.png";
//Comprobamos si existe un punto con las mismas coordenadas para crear un InfoWindow normal o multiple
if(xyPointExists(xPos,yPos)){
icon = "./images/icons/bancosbn.png";
var template = new esri.InfoTemplate();
template.setTitle("<b> TITULO!!!  </b>");
template.setContent(getWindowContent());
ip.setInfoTemplate(template);
myMultipleInfoWindowXY(ip,icon);
}else{
....
}
...
}
function getWindowContent(){
var tc = new dijit.layout.TabContainer({
style: "height: 100%; width: 150px;"
}, dojo.create("div"));
var cp1 = new dijit.layout.ContentPane({
title: "Details",
content: "sdafsadf<br>2355345<br>"
});
var cp2 = new dijit.layout.ContentPane({
title: "Details",
content: "34523453<br>2355345<br>"
});
tc.addChild(cp1);
tc.addChild(cp2);
return tc.domNode;
}
function myMultipleInfoWindowXY(elemento,icono){
try{
var imageSymbol = new Image();
var point;
imageSymbol.src = icono;
gvdiDefaultMap.graphics.add(elemento.setSymbol(esri.symbol.PictureMarkerSymbol(icono,imageSymbol.width,imageSymbol.height)));
dojo.connect(gvdiDefaultMap.graphics, "onClick", function(evt) {
var g = evt.graphic;
gvdiDefaultMap.infoWindow.setMouseOver(false);
gvdiDefaultMap.infoWindow.setMouseClick(true);
//gvdiDefaultMap.infoWindow.setContent(g.getContent()); //Also tried this
gvdiDefaultMap.infoWindow.setContent(getWindowContent());
gvdiDefaultMap.infoWindow.setTitle(g.getTitle());
gvdiDefaultMap.infoWindow.show(evt.screenPoint,gvdiDefaultMap.getInfoWindowAnchor(evt.screenPoint));
});
dojo.connect(gvdiDefaultMap.graphics, "onMouseMove", function(evt) {
if(!gvdiDefaultMap.infoWindow.getMouseClick()){
var g = evt.graphic;
gvdiDefaultMap.infoWindow.setMouseOver(true);
gvdiDefaultMap.infoWindow.setContent(g.getContent());
gvdiDefaultMap.infoWindow.setTitle(g.getTitle());
gvdiDefaultMap.infoWindow.show(evt.screenPoint,gvdiDefaultMap.getInfoWindowAnchor(evt.screenPoint));
}
});
dojo.connect(gvdiDefaultMap.graphics, "onMouseOut", function() {
if(gvdiDefaultMap.infoWindow.getMouseOver() && !gvdiDefaultMap.infoWindow.getMouseClick())
gvdiDefaultMap.infoWindow.hide();
} );
}catch(error){
mostrarError("gvdiApEstDivMedShowInfoWindowXY "+error);
}
}
And this is the result:[ATTACH=CONFIG]13925[/ATTACH]Need help please!!!Thank a lot.
