Discussion :

[cfried]

Bonjour, j'ai actuellement un problème avec un dijit.form.TextBox :

Celui ci est situé dans un dijit.TooltipDialog lui même appellé par un dijit.form.DropDownButton lui même présent dans un dijit.Dialog ! (Oui je sais c'est long !)

J'ai lu qu'on ne pouvais avoir un dijit.form.TextBox dans lequel on peut écrire s'il ne se trouvait pas dans le dijit.Dialog principal ?

J'avoue ne pas comprendre ceci, j'ai fais des recherches sur google et sur le forum ... infructueuses.

Merci de m'avoir lu !

[emmanuel.remy]

Tu peux passer ton code HTML stp ?

ERE

[cfried]

Tu peux passer ton code HTML stp ?

ERE

Bien sur, il s'agit d'une fonction qui se trouve dans un widget personnalisé

Code :

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

dojo.declare("organigramme.widget.service", [dijit._Widget, dijit._Contained], { ........... });

la voici :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
	showService: function(evt){
 
		dirigeantStore = new dojo.data.ItemFileWriteStore({url: "admin/showDirigeant.php?idService="+this.dbid});
		personnelStore = new dojo.data.ItemFileWriteStore({url: "admin/showPersonnel.php?idService="+this.dbid});
 
                var dialogService = new dijit.Dialog({
			title:""+this.nom+"",
			style: "width:640px;height:480px;",
		}, "dijitDialog");
 
		dojo.connect(dialogService, "hide", dialogService, function(){
			dialogService.destroyRecursive();
		});
 
		dojo.connect(dojo.byId('btnHideDialog'), "onClick", dialogService, function(){
			//dialogService.hide();
			dialogService.destroyRecursive();
		});
 
		var contenu = '';
		if (booadmin == 1) {
			contenu += '<div dojoType="dijit.form.DropDownButton" style="float:right">';
			contenu += '<span>Editer</span>';
			contenu += '<div dojoType="dijit.TooltipDialog">';
			contenu += '<label for="nomService">Nom Service : </label> ';
			contenu += '<input type="text" trim="true" propercase="true" name="nomService" value="'+this.nom+'" dojoType="dijit.form.TextBox" id="frmNomService'+this.dbid+'"><br/>';
			contenu += '<label for="typeService">Type Service : </label> ';
			contenu += '<select dojoType="dijit.form.ComboBox" id="frmTypeService'+this.dbid+'" name="typeService" value="'+this.type+'">';
			contenu += '<option >...</option>';
			contenu += '<option >normal</option>';
			contenu += '<option >pole</option>';
			contenu += '</select> <br/>';
			contenu += '<label for="colorService">Couleur : </label>';
			contenu += '<div class="previewColor" id="previewColor" style="width:45px; height:15px; border: 1px solid #333; margin:1px 1px 1px 1px; background:'+this.color+';" display:inline;">'+this.color+'</div>';
			contenu += '<div dojoType="dijit.form.DropDownButton" label="..." id="frmColorService" name="colorService" dropDown=dialogColor>';
			contenu += '<div dojoType="dijit.ColorPalette" onChange="changeColor(this.value);" palette="7x10"></div>';
			// contenu += '<div dojoType="dojox.widget.ColorPicker" id="picker"></div>';
			// On peut ici changer le widget de sélection de couleur pour qqchose de plus évolué (style gimp) mais inutile dans notre cas !
			contenu += '</div>';
			contenu += '<br/> <button dojoType="dijit.form.Button" class="validate "';
			contenu += 'onClick="validateMajService(dojo.byId(\'serv'+this.dbid+'\'),dojo.byId(\'frmNomService'+this.dbid+'\').value,dojo.byId(\'frmTypeService'+this.dbid+'\').value,dojo.byId(\'previewColor\').style.background);" ';
			contenu += 'type="submit">Save</button>';
			contenu += '<button dojoType="dijit.form.Button" class="cancel" onClick="this.destroyRecursive(true)" type="submit">Cancel</button>';
			contenu += '</div>';
			contenu += '</div> <br/><br/><br/>';
			contenu +=	'<div class="listePerso">'+
							'<table dojoType="dojox.grid.DataGrid" class="listePerso" jsid="listeDirigeant" id="listeDirigeant" store="dirigeantStore" style="width: 550x; height: 150px;">'+
								'<thead>'+
									'<tr>'+
										'<th field="Nom" editable="true" style="text-align: center" width="auto">Nom</th>'+
										'<th field="Prenom" editable="true" style="text-align: center" width="auto">Prénom</th>'+
										'<th field="Sexe" editable="true" style="text-align: center" width="35px">Sexe</th>'+
										'<th field="Email" editable="true" style="text-align: center" width="auto">Email</th>'+
										'<th field="Telephone" editable="true" style="text-align: center" width="auto">Téléphone</th>'+
									'</tr>'+
								'</thead>'+
							'</table> '+
 
							'<table dojoType="dojox.grid.DataGrid" class="listePerso" jsid="listePersonnel" id="listePersonnel" store="personnelStore" style="width: 550x; height: 150px;">'+
								'<thead>'+
									'<tr>'+
										'<th field="Nom" editable="true" width="auto">Nom</th>'+
										'<th field="Prenom" editable="true" width="auto">Prénom</th>'+
										'<th field="Sexe" editable="true" width="35px">Sexe</th>'+
										'<th field="Email" editable="true" width="auto">Email</th>'+
										'<th field="Telephone" editable="true" width="auto">Téléphone</th>'+
									'</tr>'+
								'</thead>'+
							'</table> </div>'+
 
							'<button dojoType="dijit.form.Button" '+
								'class="cancel"'+
								'id="btnHideDialog"'+
								'type="submit">'+
							'Fermer</button>';
		}
		else {
			contenu +=	'<div class="listePerso">'+
					'<table dojoType="dojox.grid.DataGrid" class="listePerso" jsid="listeDirigeant" id="listeDirigeant" store="dirigeantStore" style="width: 550x; height: 150px;">'+
						'<thead>'+
							'<tr>'+
								'<th field="Nom" style="text-align: center" width="auto">Nom</th>'+
								'<th field="Prenom" style="text-align: center" width="auto">Prénom</th>'+
								'<th field="Sexe" style="text-align: center" width="35px">Sexe</th>'+
								'<th field="Email" style="text-align: center" width="auto">Email</th>'+
								'<th field="Telephone" style="text-align: center" width="auto">Téléphone</th>'+
							'</tr>'+
						'</thead>'+
					'</table> '+
 
					'<table dojoType="dojox.grid.DataGrid" class="listePerso" jsid="listePersonnel" id="listePersonnel" store="personnelStore" style="width: 550x; height: 150px;">'+
						'<thead>'+
							'<tr>'+
								'<th field="Nom" width="auto">Nom</th>'+
								'<th field="Prenom" width="auto">Prénom</th>'+
								'<th field="Sexe" width="35px">Sexe</th>'+
								'<th field="Email" width="auto">Email</th>'+
								'<th field="Telephone" width="auto">Téléphone</th>'+
							'</tr>'+
						'</thead>'+
					'</table> </div>'+
 
					'<button dojoType="dijit.form.Button" '+
						'class="cancel"'+
						'id="btnHideDialog"'+
						'type="submit">'+
					'Fermer</button>';
		}	
		dialogService.attr('Content',contenu);
		dialogService.show();
	},

Merci pour votre temps ! Si il vous faut plus d'informations, n'hésitez pas !

[emmanuel.remy]

J'ai lu qu'on ne pouvais avoir un dijit.form.TextBox dans lequel on peut écrire s'il ne se trouvait pas dans le dijit.Dialog principal ?

Effectivement !
J'ai regardé le code de Dialog.js et il apparait que Dojo pose un événement :

Code :

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

this._modalconnects.push(dojo.connect(dojo.doc.documentElement, "onkeypress", this, "_onKey"));

pour détecter les accès aux arrières-plans qui doivent être interdits. Or quand tu mets un dialog dans un autre il se prend les pieds dans le tapis car il duplique ces événements... et donc quand tu tapes une touche dans ta textbox c'est le _onKey du dialog principal qui est appelé le premier (à mon avis car c'est le premier posé) et celui-ci détecte que la touche est appelée depuis un autre "plan" que celui du dialog, et donc annule la saisie !

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
	while(node){
		if(node == this.domNode){
			if(evt.charOrCode == dk.ESCAPE){
				this.onCancel(); 
			}else{
	//ON DEVRAIT PASSER ICI MAIS CE N'EST JAMAIS LE CAS ...
				return; // just let it go
			}
		}
		node = node.parentNode;
	}
	// this key is for the disabled document window
	if(evt.charOrCode != dk.TAB){ // allow tabbing into the dialog for a11y
		dojo.stopEvent(evt);
	// opera won't tab to a div
	}
...

Mais impossible n'est pas français !
Donc, interceptons le onkeypress avant Dojo et annulons le, uniquement évidemment pour ta textbox:

Code :

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

contenu += '<input type="text" (...) name="nomService" (...) dojoType="dijit.form.TextBox" onkeypress="if (arguments.length>0) arguments[0].stopPropagation(); else window.event.cancelBubble=true;"><br/>';

ERE

[cfried]

Merci emmanuel pour avoir pris le temps de me débloquer ! Mon code fonctionne à présent exactement comme je l'attendais, grâce à toi !

Bonne journée et @ + sur le forum