Redéfinir la méthode _initButton de dijit._editor.plugins.LinkDialog

**devkaty** · 12/01/2012, 17h17

Salut,

Comment je peux redéfinir la méthode _initButton de widget dijit._editor.plugins.LinkDialog ?

Merci d'avance .

**emmanuel.remy** · 13/01/2012, 00h11

Salut,

Tu peux faire un dojo.extend qui équivaut à un mixin sur le prototype de l'objet:

Code :

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

1
2
3
4
5
6
 
dojo.extend(dijit._editor.plugins.LinkDialog, {
    _initButton: function() {
          //Ton code ici
    }
});

ERE

**devkaty** · 13/01/2012, 11h17

Bojour,

Merci beaucoup pour votre réponse.

En fait, j'ai créé un widget:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
dojo.provide("mes.widget.editor.LinkDialog");
 
dojo.require("dijit._editor.plugins.LinkDialog");
 
dojo.extend(dijit._editor.plugins.LinkDialog, {
     _initButton: function() {
           console.log('ici mon code');
           ......
           ......
      }
});

dans mon fichier js, j'ai fait require a mon widget (mes.widget.editor.LinkDialog), mais je vois pas le boutton "link" dans editor !!!
Est ce que je dois redéfinir d'autre fonction ??
Mon objectif est : redéfinir le contenu de tooltip lors d'onclick sur le boutton "link" .

**emmanuel.remy** · 13/01/2012, 14h38

Salut,

Pourquoi toucher à _initButton dans ce cas ? A priori c'est plutôt le linkDialogTemplate qu'il faut modifier non ?

ERE

**devkaty** · 13/01/2012, 14h54

Oui exactement j'arrive modifié le code HTML, mais je voulais ajouté un treeview au contenu pour ça il me faut un store, model ....
Est ce que vous avez une proposition ?

**emmanuel.remy** · 13/01/2012, 15h28

Re,

Rien ne t'interdit de créer ton store, ton model etc... et d'y faire ensuite référence dans ton code HTML.

ERE

**devkaty** · 13/01/2012, 15h41

J'ai essayé de faire :

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
dojo.provide("my.widget.editor.LinkDialog");

dojo.require("dijit._editor.plugins.LinkDialog");

dojo.extend(dijit._editor.plugins.LinkDialog, {

	linkDialogTemplate: [
     		//Erreur : this ne reference pas au widget courant
     		"11"+this._createTree+"<table><tr><td>",
     		"<label for='${id}_urlInput'>${url}</label>",
     		"</td><td>",
     		"<input dojoType='dijit.form.ValidationTextBox' required='true' " +
     		"id='${id}_urlInput' name='urlInput' intermediateChanges='true'/>",
     		"</td></tr><tr><td>",
     		"<label for='${id}_textInput'>${text}</label>",
     		"</td><td>",
     		"<input dojoType='dijit.form.ValidationTextBox' required='true' id='${id}_textInput' " +
     		"name='textInput' intermediateChanges='true'/>",
     		"</td></tr><tr><td>",
     		"<label for='${id}_targetSelect'>${target}</label>",
     		"</td><td>",
     		"<select id='${id}_targetSelect' name='targetSelect' dojoType='dijit.form.Select'>",
     		"<option selected='selected' value='_self'>${currentWindow}</option>",
     		"<option value='_blank'>${newWindow}</option>",
     		"<option value='_top'>${topWindow}</option>",
     		"<option value='_parent'>${parentWindow}</option>",
     		"</select>",
     		"</td></tr><tr><td colspan='2'>",
     		"<button dojoType='dijit.form.Button' type='submit' id='${id}_setButton'>${set}</button>",
     		"<button dojoType='dijit.form.Button' type='button' id='${id}_cancelButton'>${buttonCancel}</button>",
     		"</td></tr></table>"
     		].join(""),
     		
     		_createTree: function(){
				return "tree view";
			}
			     	
});

Est ce que possible de créé une méthode et l'appeler a l’intérieur de HTML ?

**emmanuel.remy** · 13/01/2012, 16h18

Re,

Ben non... tu initialises une variable de la classe lors de son instanciation, donc this n'existe pas encore. Le constructeur est là pour ça...

ERE

**devkaty** · 13/01/2012, 18h28

Merci pour vos réponses.
Est ce que vous avez une proposition pour résoudre cette problème c'est à dire ajouter une fonction qui créé mon tree view et l'appelé pour l'afficher a l’intérieur de tooltip ?

**emmanuel.remy** · 13/01/2012, 20h48

Re,

Soit tu te crées ton propre plugin en t'appuyant sur LinkDialog, soit tu crées une class qui hérite de LinkDialog et dans ton constructeur tu affectes la variable linkDialogTemplate. Mais il ne te faut pas oublier d'enregistrer ta nouvelle class en temps que plugin:

Code :

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

1
2
3
4
5
6
7
8
9
10
//code pris dans LinkDialog
dojo.subscribe("dijit.Editor.getPlugin",null,function(o){
	if(o.plugin){ return; }
	switch(o.args.name){
		case "createTreeLink":
			o.plugin = new dijit._editor.plugins.TreeLinkDialog({command: o.args.name});
			break;
	}
});

Tiens nous informé, c'est intéressant.

ERE

**devkaty** · 16/01/2012, 12h19

Re,

Merci pour votre proposition

J'ai créé mon propre widget qui hérite dijit._editor.plugins.LinkDialog et j'ai modifié le contenu du variable linkDialogTemplate puis j'ai ajouté a la fin de mon widget :

Code :

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

1
2
3
4
5
6
7
8
9
 
dojo.subscribe("dijit.Editor.getPlugin",null,function(o){
	if(o.plugin){ return; }
	switch(o.args.name){
		case "createTreeLink":
			o.plugin = new my.widget.editor.LinkDialog2({command: o.args.name});
			break;
	}
});

dans l'appel de l'éditeur j'ai utilisé createTreeLink

Code :

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

1
2
3
4
 
<div
	data-dojo-type="dijit.Editor"
	data-dojo-props="extraPlugins:['viewsource','createTreeLink', 'unlink']">

Mais je trouve le drop down boutton désactivé et l'icon ne s'affiche meme pas et le titre = undefined lors de mouseOnOuver

**emmanuel.remy** · 16/01/2012, 14h34

Salut,

Ce qu'il faudrait déjà faire c'est un exemple basique pour s'assurer du fonctionnel. Ensuite seulement, ok pour ajouter un tree.

Si tu as un code à tester je peux prendre un peu de temps pour ça.

ERE

**devkaty** · 16/01/2012, 18h46

Salut,

Il y a plus ce soucis j'ai juste modifié le nom du variable command

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
dojo.subscribe("dijit.Editor.getPlugin", null, function(o) {
    if (o.plugin) {
        return;
    }
    var name = o.args.name;
    if (name === "createTreeLink") {
    	o.plugin = new my.widget.editor.LinkDialog2({
    		command: "createLink"
    	});
    }
});

mais maintenant j'ai un soucis d'affichage du tree a l’intérieur de tooltipDialog,il affiche le tree a l’extérieur du tooltip (ci-joint un aperçu).

Voila le code complet de mon widget:

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
 
dojo.provide("my.widget.editor.LinkDialog2");
dojo.require("dijit._editor.plugins.LinkDialog");
dojo.declare(
"my.widget.editor.LinkDialog2", dijit._editor.plugins.LinkDialog,
{
	myStore: null,
	myTree: null,
	linkDialogTemplate: [ 
     		"<table><tr><td>",
     		"<label for='${id}_urlInput'>${url}</label>",
     		"</td><td>",
     		"<input dojoType='dijit.form.ValidationTextBox' required='true' " +
     		"id='${id}_urlInput' name='urlInput' intermediateChanges='true'/>",
     		"</td></tr><tr><td>",
     		"<label for='${id}_textInput'>${text}</label>",
     		"</td><td>",
     		"<input dojoType='dijit.form.ValidationTextBox' required='true' id='${id}_textInput' " +
     		"name='textInput' intermediateChanges='true'/>",
     		"</td></tr><tr><td>",
     		"<label for='${id}_targetSelect'>${target}</label>",
     		"</td><td>",
     		"<select id='${id}_targetSelect' name='targetSelect' dojoType='dijit.form.Select'>",
     		"<option selected='selected' value='_self'>${currentWindow}</option>",
     		"<option value='_blank'>${newWindow}</option>",
     		"<option value='_top'>${topWindow}</option>",
     		"<option value='_parent'>${parentWindow}</option>",
     		"</select>",
     		"</td></tr><tr><td colspan='2'>",
     		"<button dojoType='dijit.form.Button' type='submit' id='${id}_setButton'>${set}</button>",
     		"<button dojoType='dijit.form.Button' type='button' id='${id}_cancelButton'>${buttonCancel}</button>",
     		"</td></tr></table>"
    ].join(""),
    constructor: function(){
		console.log('constructor');
		this.inherited(arguments);
	},       	
	_initButton: function(){
		this.inherited(arguments);
		 //Creation de tree view
		 //....
		 //....
		this.dropDown.domNode.appendChild(this.myTree.domNode);
	}
});
dojo.subscribe("dijit.Editor.getPlugin", null, function(o) {
    if (o.plugin) {
        return;
    }
    var name = o.args.name;
    if (name === "createTreeLink") {
    	o.plugin = new widget.element.editor.LinkDialog2({
    		command: "createLink"
    	});
    }
});

**emmanuel.remy** · 17/01/2012, 09h44

Salut,

Je pense qu'il faut que tu déclares ton tree de la même façon que les dijit qui sont dans le tooltip.

Code :

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

1
2
 
<div id="mytree" data-dojo-type="dijit.Tree"....

ERE

**devkaty** · 17/01/2012, 13h49

Je n'arrive pas à insérer le tree dans la variable linkDialogTemplate

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
linkDialogTemplate: [
		"<table><tr><td>",
		"<label for='${id}_urlInput'>${url}</label>",
		"</td><td>",
		"<input dojoType='dijit.form.ValidationTextBox' required='true' " +
		"id='${id}_urlInput' name='urlInput' intermediateChanges='true'/>",
		"</td></tr><tr><td>",
		"<label for='${id}_textInput'>${text}</label>",
		"</td><td>",
		"<input dojoType='dijit.form.ValidationTextBox' required='true' id='${id}_textInput' " +
		"name='textInput' intermediateChanges='true'/>",
		"</td></tr><tr><td>",
		"<label for='${id}_targetSelect'>${target}</label>",
		"</td><td>",
		"<select id='${id}_targetSelect' name='targetSelect' dojoType='dijit.form.Select'>",
		"<option selected='selected' value='_self'>${currentWindow}</option>",
		"<option value='_blank'>${newWindow}</option>",
		"<option value='_top'>${topWindow}</option>",
		"<option value='_parent'>${parentWindow}</option>",
		"</select>",
		"</td></tr><tr><td colspan='2'>",
		"<button dojoType='dijit.form.Button' type='submit' id='${id}_setButton'>${set}</button>",
		"<button dojoType='dijit.form.Button' type='button' id='${id}_cancelButton'>${buttonCancel}</button>",
		"</td></tr></table>",
		"<div id='mytree'></div>"
	].join(""),

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
_initButton: function(){
		this.inherited(arguments);
		var mymodel = ......

		this.mytree = new dijit.Tree({
			model			: myElement,
			onClick	        : dojo.hitch(this, function(item){
				this._setValueFromTree(item);
			})
		});

		//Affecter Tree view au tooltipDialog
		
		console.log(dojo.byId("mytree")); //==>null
		dojo.byId("mytree").appendChild(this.treeView.domNode);
	},

**emmanuel.remy** · 17/01/2012, 13h59

Je crois qu'il est plus sage de déclarer le Tree dans le template sous la forme de code inline. Une fois que cela fonctionnera alors tu pourras envisager de passer par la création par programmation.

ERE

**devkaty** · 18/01/2012, 11h11

Re,

C'est résolu on faisant :

Code :

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

1
2
this.dropDown.containerNode.appendChild(mytree.domNode);

au lieu :

Code :

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

1
2
this.dropDown.domNode.appendChild(mytree.domNode);

et maintenant ça marche bien

Merci pour votre aide

Redéfinir la méthode _initButton de dijit._editor.plugins.LinkDialog [Dojo]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager