Modifier le titre d'un onglet (TabContainer)

**devkaty** · 04/09/2009, 11h23

Salut tout le monde ,

Comment on peut modifier le title d'un onglet déja créer d'une TabContainer ?

J'ai une fonction javascript permet de creer un onglet s'il est pas cree , si onglet existe elle modifie juste le title de l'onglet , mon probleme c'est que je trouve pas une fonction qui permet de modifier le title d'un onglet s'il existe .

Voila mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function maListe(titleNewList)
{
    var tc = dijit.byId("tc"); 
    if (dijit.byId("onglet1")) {
    //Si onglet existe , je modifie le title
    // je donne a l'onglet le nouveau title "titleNewList"
      ??????
    //
     .............
   //
    } else {    
       //je cree l'onglet si n'existe pas     
        var cp1 = new dijit.layout.ContentPane({
            id :"onglet1",
            title: titleNewList,
            closable :true,
            onClose:function(){
                return confirm("Etes-vous certain de vouloir fermer cette onglet ?");
                //
                ............
               //
            }
        });    
        tc.addChild(cp1);
        tc.startup();
    }
}

Merci d'avance

**emmanuel.remy** · 04/09/2009, 19h01

Salut,

Ce n'est effectivement pas facile

car il faut remonter à la liste des boutons qui représentent les onglets:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
//tc le tabcontainer
//tc.tablist -> le TabController des onglets

//tc.tablist.getChildren() -> les controles bouton (les onglets)

//tc.tablist.getChildren()[index] -> le ième

//et finalement...
tc.tablist.getChildren()[index].attr("label","Nouveau label");

Désolé je n'ai pas trouvé plus simple... et pour avoir parcouru le code je crois qu'on ne peut pas faire autrement car rien ne relie vraiment le title du contentpane au label du bouton

ERE

**devkaty** · 07/09/2009, 11h00

Salut ;

Merci pour votre réponse.

ca marche avec se code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
tc.tablist.getChildren().attr("label",newVal);

car j'ai enlevé index j'ai testé avec un seul onglet mais quand j'ouvre autres onglets , il modifie tout les onglets et quand j'ajout index il m'affiche une erreur :
--->index is not defined

j'ai essayé ça aussi et ca marche :
J'ai récuperé id de label du button avec dijit_layout__TabButton_0 , ca marche il modifie label .

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 document.getElementById("dijit_layout__TabButton_0").innerHTML = newVal;

Mais le probleme que cette id est dynamique , si on ferme l'onglet et on le ouvre autre fois cette id se change .

Est ce que c'est possible de redifénir la methode qui cree cette id ?
Si oui , quel est le nom de cette methode ?

**emmanuel.remy** · 07/09/2009, 14h34

Salut,

Quand je parlais d'index, il faut que tu mettes la valeur de ton index de tab et non "index":

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var indexAModifier = .....;
tc.tablist.getChildren()[indexAModifier].attr("label",newVal);

ERE

**devkaty** · 07/09/2009, 15h07

Salut;

Comment je peux récuperer index de l'onglet a partir de son id ?

Merci .

**emmanuel.remy** · 07/09/2009, 15h51

Envoyé par devkaty

Salut;

Comment je peux récuperer index de l'onglet a partir de son id ?

Merci .

Je suppose que c'est l'indice du contentpane associé, dans la liste des contentpane du tabcontainer.

ERE

**devkaty** · 07/09/2009, 16h19

Envoyé par emmanuel.remy

Je suppose que c'est l'indice du contentpane associé, dans la liste des contentpane du tabcontainer.

ERE

Comment je peux recuperer cette indice ?

**emmanuel.remy** · 07/09/2009, 16h31

Re,

Retournement de situation: je viens de m'apercevoir qu'en changeant directement le title du ContentPane concerné, cela change aussi le title de l'onglet. Donc en fait tu n'as pas de code particuler à écrire sauf :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
contentPaneConcerne.attr("title",newTitle);

ERE

**devkaty** · 07/09/2009, 16h44

Merci pour vs réponse.

j'ai déja tésté se code mais marche pas , il modifie pas le title

est se qu'il faut parser la zone ? .

**emmanuel.remy** · 07/09/2009, 17h29

Envoyé par devkaty

Merci pour vs réponse.

j'ai déja tésté se code mais marche pas , il modifie pas le title

est se qu'il faut parser la zone ? .

Attention le code à exécuter c'est EXACTEMENT:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

contentPaneConcerne.attr("title",newTitle);

Pas un setTitle ou autre.

Pour info le code source dans dojo est celui-ci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
this.connect(page, 'attr', function(name, value){
						if(arguments.length == 2){
							var buttonAttr = {
								title: 'label',
								showTitle: 'showLabel',
								iconClass: 'iconClass',
								closable: 'closeButton'
							}[name];
							if(buttonAttr){
								button.attr(buttonAttr, value);
							}

ERE

**devkaty** · 07/09/2009, 17h48

Malheureusement , marche plus avec se code .

voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function maMethode(newVal)
{
    var tc = dijit.byId("tc"); 
    if (dijit.byId("onglet1")) {
        var cp1 = dijit.byId("onglet1");
        cp1.attr('title',newVal);
       cp1attr("href",
                            "edit-liste/id/" + id);
    } else {        
        var cp1 = new dijit.layout.ContentPane({
            id :"onglet1",
            title: newVal,
            closable :true,
            preload:true,
            href:"edit-liste/id/"+id,
            onClose:function(){
                return confirm("Etes-vous certain de vouloir fermer cette onglet ?");
            }
        });    
        tc.addChild(cp1);
        tc.selectChild(cp1);
        tc.startup();
    }
 
}

**emmanuel.remy** · 07/09/2009, 19h44

Re,

Je viens de comprendre: cette fonctionnalité est valable à partir de la 1.3 et je suppose donc que tu travailles en 1.2 ou moins ?

Il te faut donc repartir sur la première solution. Et pour trouver le ContentPane concerné, fait une boucle sur tc.getChildren(); inspecte le title et quand tu l'as trouvé, tu as aussi son index.

ERE

**devkaty** · 08/09/2009, 10h50

Merci toujours pour vos réponse.

Je travaille avec la version 1.3.2 de dojo .

j'ai fait comme ça , mais j'ai pas arrivé a recuperé index de l'onglet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var children = tc.getChildren();
        for (var i = 0; i < children.length; i++){
             var child = children[i].id;
              if(child == "onglet1"){
               // j'ai pa arrivé ici a recuperé l'index d'onglet a partir de son id
               // var index = ?????
                 tc.tablist.getChildren()[index].attr("label",newVal);
            }
        }

**emmanuel.remy** · 08/09/2009, 12h41

Salut,

Envoyé par devkaty

Merci toujours pour vos réponse.

Je travaille avec la version 1.3.2 de dojo .

Si tu travailles avec la 1.3, alors je suis catégorique,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var cp1 = dijit.byId("onglet1");
cp1.attr('title',newVal);

fonctionne, je l'ai testé hier pour en avoir le coeur net. Tu dois avoir un souci autre part

ERE

PS: il manque aussi un "." dans ton code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
//cp1attr("href","edit-liste/id/" + id);
cp1.attr("href","edit-liste/id/" + id);

**devkaty** · 08/09/2009, 13h37

Envoyé par emmanuel.remy

Salut,
Si tu travailles avec la 1.3, alors je suis catégorique,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var cp1 = dijit.byId("onglet1");
cp1.attr('title',newVal);

fonctionne, je l'ai testé hier pour en avoir le coeur net. Tu dois avoir un souci autre part

ERE

PS: il manque aussi un "." dans ton code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
//cp1attr("href","edit-liste/id/" + id);
cp1.attr("href","edit-liste/id/" + id);

cette erreur , c'est a cause de copier coller .

vraiment je sais pas viens d'ou cette probleme.

J'au une question : comment on peux recuperer index de l'onglet ds tabContainer ?

**Sheava** · 13/09/2009, 13h50

Salut a vous,

Moi j'utilise ce code, qui modifie le titre de l'onglet courant.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
 
 monTabContainer.selectedChildWidget.controlButton.attr("label", "nouveau label");

Malheureusement, je pense que pour modifier titre d'un onglet (autre que le courant) tu es obligé de passé par les index.

Cordialement

**devkaty** · 14/09/2009, 10h55

Salut ;

Merci pour votre réponse

Oui , je suis obligé de passer par index par ce que j'ai plusieurs onglets(possible que je modifie un onglet qui n'est pas séléctionné) .Mon probléme c'est : comment récuperer index d'un onglet.

**emmanuel.remy** · 15/09/2009, 18h39

Salut,

Comme vu précédemment

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

tc.tablist.getChildren()

revoie la liste des "onglets". Donc à toi de la passer en revue pour déterminer celui qui t'intéresse.

ERE

**devkaty** · 16/09/2009, 11h11

Salut ;

Merci a vous aides.

J'ai recuperé tous les onglets , mais moi je veux modifier un seul onglets parmi les onglets recuperé , pour ça je suis obligé de recueprer index de chaque onglet.

**emmanuel.remy** · 17/09/2009, 11h43

Salut,

Envoyé par devkaty

Salut ;

Merci a vous aides.

J'ai recuperé tous les onglets , mais moi je veux modifier un seul onglets parmi les onglets recuperé , pour ça je suis obligé de recueprer index de chaque onglet.

Utilise ta variable qui te sert à faire ta boucle for...

ERE

Modifier le titre d'un onglet (TabContainer) [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager