Présentation

MenuGenerator est une classe qui permet de générer un popup menu (pour bouton dropdown ou menu contextuel ou autre) à partir d'une représentation objet.
La structure de l'objet est utilisée pour gérer la création de menus simples ou arborescents.

Exemple d'objet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var menu=[
        {id:"foo", onClick:dojo.hitch(this,function(){alert("foo")}), label : "foo",hidden:true},
        {id:"separator1", label : "-"},
        {id:"submenu1", label : "sub menu 1", subMenuId:"submenu_Sub",
        subMenu : [
                {id:"foobar0", onClick:function() {alert("foobar 0")}, label : "foobar 0", disabled:true},
                {id:"foobaz0", onClick:function() {alert("foobaz 0")}, label : "foobaz 0"}
        ]},
        {id:"bar", onClick:function() {alert("bar")}, label : "bar"},
        {id:"submenu2", label : "sub menu 2",
        subMenu : [
                {id:"foobar1", onClick:function() {alert("foobar1")}, label : "foobar1"},
                {id:"foobaz1", onClick:function() {alert("foobaz1")}, label : "foobaz1"}
        ]},
        {id:"foobarbaz0", onChange:dojo.hitch(this,function(){alert("foobarbaz1")}), label : "foobarbaz1",checked:true},
        {id:"foobarbaz1", onChange:dojo.hitch(this,function(){alert("foobarbaz2")}), label : "foobarbaz2",checked:false}
];

Description de l'objet

Si la structure de l'objet est utilisée pour gérer l'arborescence du menu, les propriétés permettent de définir le type de menu à créer.
La liste des attributs est le même que pour un sous-objet de dijit.Menu , à savoir :

• dijit.MenuItem pour les entrées "normale".
  exemple :
  {id:"foo", onClick:dojo.hitch(this,function(){alert("foo")}), label : "foo",hidden:true}
• dijit.PopupMenuItem pour les entrées de type "sous menu".
  exemple :
  

  1 2 3 4

  {id:"submenu2", label : "sub menu 2", subMenu : [         //autres menus de type "normaux" ]}

• dijit.CheckedMenuItem pour les entrées avec case à cocher.
  exemple :
  {id:"foobarbaz0", onChange:dojo.hitch(this,function(){alert("foobarbaz1")}), label : "foobarbaz1",checked:true}

Différencier une entrée "sous menu" d'une entrée normale

Pour créer un sous menu, il suffit de préciser dans les attributs de l'objet la propriété subMenu.
Celle-ci est un tableau qui contient les items du sous menu.

Différencier une entrée "case à cocher" d'une entrée normale

Pour spécifier un menu case à coché, vous devez ajouter la propriété checked à votre objet.
A false, vous aurez une case a coché non sélectionnée, à true elle sera sélectionnée.

Propriété spéciale

• "hidden". Cette propriété, placé à true permet de cacher l'entrée
• "id". Cette propriété est optionnelle. Vous devez le spécifiez si vous avez besoin d'agir sur votre menu après sa création.

Instancier la classe.

1
2
3
4
5
6
7

sample = new dojox.widget.MenuGenerator({
        menuEntries:menu,
        targetNodeIds:["bind1", "bind2"],
        onOpen:function() {
                console.info("just open menu !");
        }
});

Exemple et téléchargement

Vous pouvez voir un exemple d'utilisation et télécharger le fichier ici :
http://ben.dojotoolkit-fr.org/test_MenuGenerator.html

Utiliser la classe

Pour que cela fonctionne, placez le fichier téléchargé dans dojox/widget/ et n'oubliez pas le require :
dojo.require("dojox.widget.MenuGenerator");

Track

Ce widget est disponible sur le track de dojo : http://bugs.dojotoolkit.org/ticket/7382