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

Version imprimable

12/01/2012, 17h17
devkaty

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

Salut,

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

Merci d'avance .

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

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" .

13/01/2012, 14h38
emmanuel.remy

Salut,

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

ERE
13/01/2012, 14h54
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 ?
13/01/2012, 15h28
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

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 ?

13/01/2012, 16h18
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
13/01/2012, 18h28
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 ?

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

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 :(

16/01/2012, 14h34
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

1 pièce(s) jointe(s)

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"
    	});
    }
});

17/01/2012, 09h44
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

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);
	},

17/01/2012, 13h59
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
18/01/2012, 11h11
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 :ccool:

Merci pour votre aide :)