[OpenLayers-Users] custom control in panel trouble in IE with
redraw function
Audaire David
DAUDAIRE at ares.fr
Thu Nov 15 04:38:55 EST 2007
hi,
You are true, please see below (i put the all class):
/**
* @author
*/
/**
* @dependence OpenLayers/Control.js
*
* Class: OpenLayers.Control.ListeChoix
* Control porposant des listes de choix qui modifient l'affichage de la
carte
*
*
* hérite de la classe:
* - <OpenLayers.Control>
*/
OpenLayers.Control.ListeChoix = OpenLayers.Class(OpenLayers.Control, {
/**
* Constant: CLASSES_CSS_TYPES
* {Array[string]}
*/
CLASSES_CSS_TYPES:
["tdsel","tdpair","tdimpair","ctrlactif","ctrldesactive"],
/**
* property: listevaleurs
* {Array[string]}
*/
listevaleurs:null,
/**
* property: listevaleurs
* {integer}
*/
ctrlwidth:null,
/**
* definit si les selections de la liste sont gérées cote serveur (avec une
requête ajax/json)
* property: isjson
* par defaut à vrai
* {boolean}
*/
isjson:true,
/**
* property: containerlist
* {domelement div}
*/
containerList: null,
/**
* Property: label
* texte s'affichant à gauche de la liste
* {string}
*/
label: null,
/**
* Property:isListOpen
* type {boolean}
*/
isListOpen:false,
/**
* Property:comboimgsrc
* type {boolean}
*/
comboimgsrc:null,
/**
* property: comboLargeur
* {Array[string]}
*/
comboLargeur: null,
/**
* Property:isListEnabled
* return boolean
*/
isListEnabled:false,
/**
* Property: nom
* nom de la listebox (id)
* {string}
*/
nom: null,
/**
* Property: urlautocompletion
* au cas ou
* {string}
*/
urlautocompletion: null,
/**
* Property: valeurselection
* {string}
*/
valeurselection: null,
/**
* Property: idselection
* {string}
*/
idselection: null,
/**
* Property: combotxt
* {domelement}
*/
combotxt: null,
/**
* Method: resetListe
* Vide la liste de choix.
*/
resetListe: function() {
},
/**
* Property: GestionnaireInterface
* {object}
*/
gestionnaireInterface: null,
/**
* Method: setGestionnaireInterface
* met à jour les info sur la selection suite à changement.
*/
setGestionnaireInterface: function(objgestinterface) {
this.gestionnaireInterface=objgestinterface;
},
/**
* Method: majSelection
* met à jour les info sur la selection suite à changement.
*/
majSelection: function(valeurselection,idselection) {
this.valeurselection=valeurselection;
this.combotxt.value=this.valeurselection;
this.idselection=idselection;
},
/**
* Method: selectionchange
* listener de la modification de la selection d'une nouvelle valeur
dans la liste.
*/
selectionchange:function(e){
var thesrcelt=OpenLayers.Event.element(e);
var valeurselection=thesrcelt.firstChild.nodeValue;
var idselection=thesrcelt.getAttribute("idx");
thesrcelt.style.backgroundColor="";
this.majSelection(valeurselection,idselection) ;
this.gererAffichage();
if (this.isjson===true)
{
this.gestionnaireInterface.demandeInitClientBean(this.nom,this.idselection);
}
else
{
this.gestionnaireInterface.updateInterface(this.nom,this.idselection,this.valeurselection);
}
},
/**
* Method: tdmouseOut
*
*/
tdmouseOut: function(e) {
var thesrcelt= OpenLayers.Event.element(e);
thesrcelt.style.backgroundColor="";
},
/**
* Method: tdmouseOver
*
*/
tdmouseOver: function(e) {
var thesrcelt= OpenLayers.Event.element(e);
thesrcelt.style.backgroundColor="gray";
},
/**
* Method: genereListe
* Crée la liste de choix.
* Parameters:
* valeurs {Array[string]}
* return domfragment
*/
genereListe: function(valeurs) {
if (this.containerList !== null)
{
var elt=this.containerList.parentNode;
elt.removeChild(this.containerList);
this.containerList=null;
}
if (valeurs!== null)
{
this.listevaleurs=[];
var j =0;
do
{this.listevaleurs[j]=valeurs[j];} while (++j < valeurs.length);
}
var liste = document.createDocumentFragment();
var tabval = document.createElement("table");
tabval.setAttribute("width",this.ctrlwidth);
liste.appendChild(tabval);
tabval.className="liste_valeurs";
var tbody = document.createElement("tbody");
tabval.appendChild(tbody);
var lastclassname=this.CLASSES_CSS_TYPES[2];
for (var i = 0; i < this.listevaleurs.length; i++) {
var tr = document.createElement("tr");
tbody.appendChild(tr);
var tdval = document.createElement("td");
tdval.setAttribute("idx",i);
tr.appendChild(tdval);
if(lastclassname==this.CLASSES_CSS_TYPES[1])
{
lastclassname=this.CLASSES_CSS_TYPES[2];
}
else{
lastclassname=this.CLASSES_CSS_TYPES[1];
}
tdval.className=lastclassname;
var aText = document.createTextNode(this.listevaleurs[i]);
tdval.appendChild(aText);
// ajout de l'événement onclick selection d'une valeur dans la liste
OpenLayers.Event.observe(tdval,"click",
OpenLayers.Function.bind(this.selectionchange, this));
OpenLayers.Event.observe(tdval,"mouseover",
OpenLayers.Function.bind(this.tdmouseOver, this) );
OpenLayers.Event.observe(tdval,"mouseout",
OpenLayers.Function.bind(this.tdmouseOut, this)) ;
}
// ajout de la div contenant la liste de valeurs
var div=null;
div = document.createElement("div");
div.style.display = "none";
div.className = "comboListe";
div.id="liste_"+this.nom;
div.appendChild(liste);
this.containerList=OpenLayers.Util.getElement(div);
this.panel_div.appendChild(this.containerList);
OpenLayers.Event.observe(tabval,"mouseover",OpenLayers.Function.bind(this.open,
this)) ;
OpenLayers.Event.observe(tabval,"mouseout",OpenLayers.Function.bind(this.close,
this)) ;
},
/**
* Method: gererAffichage
* La Liste de choix est visible ou non.
*/
gererAffichage: function() {
if (this.isListOpen)
{
this.isListOpen = false;
this.containerList.style.display = "none";
}else{
this.isListOpen = true;
this.containerList.style.display = "block";
}
},
/**
* Method: close
* La Liste de choix est visible ou non.
*/
close: function() {
this.isListOpen = false;
this.containerList.style.display = "none";
},
/**
* Method: open
* La Liste de choix est visible ou non.
*/
open: function() {
this.isListOpen = true;
this.containerList.style.display = "block";
},
/**
* Method: gererDisponibilite
* Rend liste de choix accessible ou non à l'utilisateur .
*/
gererDisponibilite: function() {
},
/**
* Constructor: OpenLayers.Control.ListeChoix
*
* Parameters:
* ctrlw - {string} largeur en pixel du control zone selection et
liste de choix
* nom - {string} nom de la liste
* label - {string} texte à gauche de la combo
* options - {Object}
* comboimgsrc - {String} Source de l'image pour ouvrir la liste de
valeur
* listevaleur - {Array[string]}Liste des valeurs de la liste de choix
* idselection - {string}
* inputsize - {integer}largeur du champs valeur selectionnée
*/
initialize:
function(ctrlw,inputsize,nom,label,idselection,alistevaleur,comboimgsrc,options)
{
OpenLayers.Control.prototype.initialize.apply(this, [options]);
this.label=label;
this.nom=nom;
this.ctrlwidth=ctrlw;
this.comboLargeur=inputsize;
this.idselection=idselection;
if (alistevaleur!==null)
{
this.listevaleurs=new Array();
var i =0;
do
{this.listevaleurs[i]=alistevaleur[i];} while (++i <
alistevaleur.length);
}
this.comboimgsrc=comboimgsrc;
},
/**
* Method: draw
*
* Parameters:
*
*
* Returns:
* {DOMElement} reference vers le div contenant le controle liste de
choix.
*/
draw: function() {
// initialize our internal div
OpenLayers.Control.prototype.draw.apply(this, arguments);
this.div.id=this.CLASS_NAME+"_"+this.nom;
var combo = document.createDocumentFragment();
var tbsel = document.createElement("table");
combo.appendChild(tbsel);
var tbody = document.createElement("tbody");
tbsel.appendChild(tbody);
tbsel.setAttribute("width",this.ctrlwidth);
var tr = document.createElement("tr");
tbody.appendChild(tr);
if (this.label!=='')
{
aLabelText =document.createTextNode(this.label);
}
var tdval = document.createElement("td");
tr.appendChild(tdval);
// zone de saisie de la combo
var texte = document.createElement("input");
texte.className = "comboTexte";
texte.setAttribute("maxlength",this.comboLargeur);
texte.setAttribute("size",this.comboLargeur);
texte.id=this.nom+"_"+"comboTexte";
if (this.listevaleurs!==null){
texte.value=this.listevaleurs[this.idselection];
}
else{texte.value="pas de valeur";}
this.combotxt=OpenLayers.Util.getElement(texte);
tdval.appendChild(texte);
var tdbtn = document.createElement("td");
tr.appendChild(tdbtn);
var img = document.createElement("img");
img.src = this.comboimgsrc;
tdbtn.appendChild(img);
// ajout de l'événement mouseover sur l'image pour
//ouvrir ou fermer la liste de valeur
OpenLayers.Event.observe(img, "mouseover",
OpenLayers.Function.bind(this.open, this));
// ajout du fragment
this.panel_div.appendChild(combo);
// ajout de la div contenant la liste de valeurs
if (this.listevaleurs!==null) // cas de init
{
alert("listevaleur!==null");
this.genereListe();
this.panel_div.appendChild(this.containerList);
}
},
CLASS_NAME: "OpenLayers.Control.ListeChoix"
});
Eric Lemoine-3 wrote:
>
> On Nov 14, 2007 11:22 AM, Audaire David <DAUDAIRE at ares.fr> wrote:
>>
>> hi
>>
>> I have build a kind of combobox which Inherit from opnelayers.control
>> (the
>> control is dynamicaly build on his draw methode), i add it to a panel
>> control, but i have trouble whith the panel redraw function on IE.
>>
>> this.div.innerHTML = "" this make me loose the control on Internet
>> Explorer,
>> no problem with fireFox
>>
>> Any idea?
>
> Hi! It'd probably be helpful if you post some code.
>
> --
> Eric
> _______________________________________________
> Users mailing list
> Users at openlayers.org
> http://openlayers.org/mailman/listinfo/users
>
>
--
View this message in context: http://www.nabble.com/custom-control-in-panel--trouble-in-IE-with-redraw-function-tf4803991.html#a13764444
Sent from the OpenLayers Users mailing list archive at Nabble.com.
More information about the Users
mailing list