Ako správne programaticky otvoriť dijit/DropDownMenu

Nedávno som riešil jeden problém, a to programatické otvorenie widgetu dijit/DropDownMenu. Keďže tento spôsob nie je zdokumentovaný, našiel som na internete riešenia, ktoré túto činnosť umožňujú. Žiaľ unikol tu jeden detail, a to, že otvorené menu nie je možné zatvoriť kliknutím mimo neho. Zatvoriť sa dá len kliknutím na hlavný button.

Keďže dokumentácia frameworku Dojo Toolkit je stále veľmi slabá, trvalo mi dlhší čas, kým som zistil, ako tento problém vyriešiť. Pre otvorenie widgetu dijit/DropDownMenu, ktorý je súčasťou dijit/form/DropDownButton je potrebné použiť metódu openDropDown(). Nasledujúci príklad demonštruje vytvorenie menu, ktoré je v buttone, a jeho otvorenie.

Príklad: Zápis do elementu <body>.

1
<div id="ddb"></div>
<div id="ddb"></div>

Príklad: Zápis do elementu <script>.

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
require(["dojo/ready", "dijit/DropDownMenu", "dijit/MenuItem",
  "dijit/form/DropDownButton", "dojo/dom"], function (ready, DropDownMenu,
  MenuItem, DropDownButton, dom) {
    ready(function () {
 
    var menu = new DropDownMenu({
    });
 
    var item1 = new MenuItem({
      label: "Item 1",
      onClick: function () {
      }
    });
 
    menu.addChild(item1);
 
    var item2 = new MenuItem({
    label: "Item 2",
      onClick: function () {
      }
    });
 
    menu.addChild(item2);
    var ddb = new DropDownButton({
      disabled: false,
      label: "Menu",
      dropDown: menu,
      dropDownPosition: ["below", "above"]
      }, "ddb");
    ddb.startup();
    ddb.openDropDown();
  });
});
require(["dojo/ready", "dijit/DropDownMenu", "dijit/MenuItem",
  "dijit/form/DropDownButton", "dojo/dom"], function (ready, DropDownMenu,
  MenuItem, DropDownButton, dom) {
    ready(function () {

    var menu = new DropDownMenu({
    });

    var item1 = new MenuItem({
      label: "Item 1",
      onClick: function () {
      }
    });

    menu.addChild(item1);

    var item2 = new MenuItem({
    label: "Item 2",
      onClick: function () {
      }
    });

    menu.addChild(item2);
    var ddb = new DropDownButton({
      disabled: false,
      label: "Menu",
      dropDown: menu,
      dropDownPosition: ["below", "above"]
      }, "ddb");
    ddb.startup();
    ddb.openDropDown();
  });
});

Aj keď to teraz vyzerá, že všetko je v poriadku, po pokuse zatvoriť menu nastane problém, že onBlur() zatvorenie nefunguje. Pre účely plnej funkcionality dijit/DropDownMenu je potrebné aplikovať metódu focus(). Nasledujúci príklad už zabezpečí plnú funkcionalitu otvorenie dijit/DropDownMenu.

Príklad: Zápis do elementu <body>.

1
<div id="ddb"></div>
<div id="ddb"></div>

Príklad: Zápis do elementu <script>.

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
require(["dojo/ready", "dijit/DropDownMenu", "dijit/MenuItem",
  "dijit/form/DropDownButton", "dojo/dom"], function (ready, DropDownMenu,
  MenuItem, DropDownButton, dom) {
    ready(function () {
 
    var menu = new DropDownMenu({
    });
 
    var item1 = new MenuItem({
      label: "Item 1",
      onClick: function () {
      }
    });
 
    menu.addChild(item1);
 
    var item2 = new MenuItem({
    label: "Item 2",
      onClick: function () {
      }
    });
 
    menu.addChild(item2);
    var ddb = new DropDownButton({
      disabled: false,
      label: "Menu",
      dropDown: menu,
      dropDownPosition: ["below", "above"]
      }, "ddb");
    ddb.startup();
    ddb.openDropDown();
    ddb.focus();
  });
});
require(["dojo/ready", "dijit/DropDownMenu", "dijit/MenuItem",
  "dijit/form/DropDownButton", "dojo/dom"], function (ready, DropDownMenu,
  MenuItem, DropDownButton, dom) {
    ready(function () {

    var menu = new DropDownMenu({
    });

    var item1 = new MenuItem({
      label: "Item 1",
      onClick: function () {
      }
    });

    menu.addChild(item1);

    var item2 = new MenuItem({
    label: "Item 2",
      onClick: function () {
      }
    });

    menu.addChild(item2);
    var ddb = new DropDownButton({
      disabled: false,
      label: "Menu",
      dropDown: menu,
      dropDownPosition: ["below", "above"]
      }, "ddb");
    ddb.startup();
    ddb.openDropDown();
    ddb.focus();
  });
});

Záver

Ako vidieť, Dojo má stále veľa vecí nezdokumentovaných, ktoré spôsobujú problémy pri vývoji aplikácií.

Ako správne programaticky otvoriť dijit/DropDownMenu

Záver

Comments

Add a comment