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

[devkaty]

Salut,

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

Merci d'avance .

[emmanuel.remy]

Salut,

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

Code :

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

ERE

[devkaty]

Bojour,

Merci beaucoup pour votre réponse.

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

Code :

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]

Salut,

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

ERE

[devkaty]

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]

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]

J'ai essayé de faire :

Code :

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]

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]

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]

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 :

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]

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 :

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 :

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]

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]

Salut,

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

Code :

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 :

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]

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 :

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

ERE

[devkaty]

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

Code :

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 :

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]

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]

Re,

C'est résolu on faisant :

Code :

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

au lieu :

Code :

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

et maintenant ça marche bien

Merci pour votre aide