按 class 检索 dijit 元素

Question

我想通过 class 检索 dijit 元素。基于这些 docs，我尝试了下面的代码。我在 dijit/Toolbar 上有几个 dijit/form/ToggleButtons 用于某些地图功能，我正在尝试计算切换。问题是，我得到：'Uncaught TypeError: dijit.registry.byClass is not a function'

require([
  "esri/geometry/Extent",
  "esri/toolbars/navigation",
  "dojo/on",
  "dijit/registry",
  "dijit/Toolbar",
  "dijit/form/Button",
  "dijit/form/ToggleButton"
  //"dojo/domReady!"
],
function (Extent, Navigation, on, registry, Toolbar, Button, ToggleButton) {


  var navToolbar;

  navToolbar = new Navigation(window.myMap);


  var zoomInButton = new ToggleButton({
    label: "Zoom Avant",
    showLabel: false,
    iconClass: "zoominIcon",
    checked: false,
    onClick: function () {
      //alert("test button clicked")
      navToolbar.activate(Navigation.ZOOM_IN);
      toggleButtonIcon(this);
    }
  }, "zoomin");
  zoomInButton.startup();

  var zoomOutButton = new ToggleButton({
    label: "Zoom Arrière",
    showLabel: false,
    iconClass: "zoomoutIcon",
    onClick: function () {
      //alert("test button clicked")
      navToolbar.activate(Navigation.ZOOM_OUT);
      toggleButtonIcon(this);
    }
  }, "zoomout");
  zoomOutButton.startup();


  //this toggles the button highlight in the toolbar to show which tool is currently active
  //note - doesn't do the FullExtent since it's a button not a togglebutton
  function toggleButtonIcon(tool) {
    //only the tools in the toolbar are dijit togglebuttons so can iterate thru them
    dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
      if (togbtn == tool) {
        togbtn.attr("checked", true);
      }
      else {
        togbtn.attr("checked", false);
      }
    });
  }
});

HTML:

<div class="toolContainer">
  <div class="navBarClass" id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'" style="background-color:#ffffff;">
    <button type="button" id="zoomin"></button>
    <button type="button" id="zoomout"></button>
  </div>

</div>

更新：我注意到 this docs page 一些可能相关的附加信息。然而，我现在对我的选择是什么感到困惑（道场的新手）。我正在寻找使用 dojo/query。我需要能够根据 class.

将几个按钮与其他按钮区分开来

Note that for backwards compatibility, the dijit.registry global variable (as opposed to the dijit/registry module) includes array iterator methods (forEach, filter, byClass, map, every, and some). However, AMD code should not expect these functions to be available in the Object returned from require([“dijit/registry”]).

Answer 1

dijit.registry.byClass 在他们的 API 中不存在，如错误中所述：

Uncaught TypeError: dijit.registry.byClass is not a function.

您还可以从 dijit 文档中获取：

http://dojotoolkit.org/api/?qs=1.10/dijit/registry

要查找小部件，您可以使用 dijit.registry 的以下功能之一：

byId(id) 通过 id 查找小部件（我建议您使用这个）。
byNode(node) Returns 给定DOMNode对应的widget
findWidgets(root,skipNode) 在根下搜索子树返回找到的小部件。

Answer 2

您需要了解 this 的工作原理。这里链接了两个方法。完整的调用是：

dijit.registry.forEach(function(w){
     w.containerNode.appendChild(dojo.create("div"));
}).byClass("dijit.Dialog").forEach(function(w){ /* only dijit.Dialog instances */ });

Thr 第一种方法，dijit.registry.forEach() returns dijit/WidgetSet (Doc) 的实例。 dijit/WidgetSet 实例有一个方法 byClass。此方法的作用是，它将初始 WidgetSet 减少为一个新的 WidgetSet 实例，该实例将仅包含那些在本例中具有 declaredClass 和 dijit.Dialog 的小部件。

要通过 class 检索 dijit 元素，您可以使用 dojo/query 和 registry/getEnclosingWidget 的组合。首先使用 class.

查询小部件的所有 DOM 节点

var domNodes= query('.myClass', this.domNode);

然后，遍历此列表以找到与每个 domNode 对应的小部件。

domNodes.forEach(function(domNode){
    var widget= registry.getEnclosingWidget(domNode);
    //do your processing
});

按 class 检索 dijit 元素

Retrieve dijit elements by class

javascript

dojo

dijit.form