javascript - Dijit/form/Select inside Dijit/TitlePane 自定义小部件的一部分在错误的位置打开下拉菜单

Question

我有以下小部件 HTML。

<div class="expandableSearch">
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title:'${prefixTitle}', open:false" id="${containedWidgetId}titleNodePane">
        <div id="container"
        class="${baseClass}Container"
        data-dojo-attach-point="containerNode"></div>
    </div>
</div>

后面带有以下 Javascript:

/**
 * Javascript for ExpandableSearchComponent
 */
define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin",
        "dojo/text!./templates/ExpandableSearchComponent.html",
        "dijit/TitlePane", "dijit/_WidgetsInTemplateMixin", "dijit/registry",
        "dojo/on", "dojo/aspect", "dojo/_base/lang", "dojo/dom",
        "dojo/dom-attr", "js/utils/CommonUtils", "dijit/focus" ], function(declare,
        _WidgetBase, _TemplatedMixin, template, TitlePane,
        _WidgetsInTemplateMixin, registry, on, aspect, lang, dom, domAttr,
        CommonUtils, focusUtil) {

    return declare([ _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ], {
        templateString : template,
        prefixTitle : "",
        containedWidgetId : "",
        defaultValue : "",

        startup : function() {
            this.inherited(arguments);
            var containedWidgetId = this.containedWidgetId;
            var containedWidget = registry.byId(this.containedWidgetId);
            if (typeof containedWidget === "undefined") {
                containedWidget = dom.byId(this.containedWidgetId);
            }

            var titlePane = registry.byId(this.containedWidgetId
                    + "titleNodePane");
            this.own(on(titlePane, "Show", function() {

                if (typeof containedWidget.loadAndOpenDropDown === "function") {
                    containedWidget._aroundNode = containedWidget.focusNode;
                    containedWidget.loadAndOpenDropDown();
                }
                focusUtil.focus(dom.byId(containedWidgetId));
            }));
            this.own(on(titlePane, "Hide", function() {
                if (typeof containedWidget.closeDropDown === "function") {
                    containedWidget.closeDropDown();
                }

            }));

            this.own(on(containedWidget, "change", function(event) {
                var newVal = "";
                if (typeof containedWidget.attr == "function"
                        && containedWidget.attr("displayedValue") !== null) {
                    newVal = containedWidget.attr("displayedValue");
                }
                if (typeof event === "object") {
                    newVal = containedWidget.value;
                }
                var newTitle = this.prefixTitle + newVal;
                if (newTitle.length > 35) {
                    newTitle = newTitle.substring(0, 32) + "...";
                }
                titlePane.set("title", newTitle);
                if (titlePane.open) {
                    titlePane.toggle();
                }
            }.bind(this)));

        },
        reset : function() {
            var containedWidget = registry.byId(this.containedWidgetId);
            if (typeof containedWidget === "undefined") {
                containedWidget = dom.byId(this.containedWidgetId);
            }
            if (typeof containedWidget.set === "function"
                    && containedWidget.attr("displayedValue") !== null) {
                containedWidget.set("value", this.defaultValue);
            }
            if (typeof containedWidget.set === "function"
                    && containedWidget.attr("displayedValue") === null) {
                containedWidget.set("value", this.defaultValue);
            }
            if (typeof containedWidget.onChange !== "function") {
                domAttr.set(containedWidget, "value", this.defaultValue);
                if ("createEvent" in document) {
                    var evt = document.createEvent("HTMLEvents");
                    evt.initEvent("change", false, true);
                    containedWidget.dispatchEvent(evt);
                } else {
                    containedWidget.fireEvent("onchange");
                }
            }
        }
    });

});

本质上，这种 HTML 和 Javascript 的组合只是一个 dijit/TitlePane 以及一些额外的 javascript

1. 自动设置 Pane 的标题；
2. 如果底层元素有下拉菜单，则自动打开和关闭它；
3. 自动将焦点设置到所包含的元素。

像这样使用:

<div data-dojo-type="js/widgets/ExpandableSearchComponent" id="machineSearchView.operatingSystemExpandableSearch"
    data-dojo-props="prefixTitle: '<s:property value="%{getText('label.machine.operatingSystem')}"/>: ', containedWidgetId: 'machineSearchView.operatingSystem', defaultValue: '-1'">
    <div data-dojo-type="dojo/store/Memory"
        data-dojo-id="operatingSystemStore"
        data-dojo-props="<s:property value='%{getOperatingSystemTypeCodeJsonString()}'/>"></div>
    <s:set name="operatingSystem" value="machineSearchView.operatingSystem"
        scope="request"></s:set>
    <div data-dojo-type="dijit/form/Select" class="readOnlySelect"
        data-dojo-props="store:operatingSystemStore, labelAttr: 'label', sortByLabel: false, value:'${operatingSystem}'"
        name="machineSearchView.operatingSystem" id="machineSearchView.operatingSystem"></div>
</div>

当我打开它时，它看起来像这样:

如您所见，dijit/form/Select 在 TitlePane 组件上而不是在 Select div 本身上打开 SelectMenu。您可以在 SelectMenu 的侧面看到“Select”。

作为我希望它的外观的示例:

containedWidget._aroundNode = containsWidget.focusNode;试图使其基于 https://davidwalsh.name/dijit-dropdowns 工作。 ，但这没有帮助。我不确定我还能尝试什么。我已经尝试过在 Dojo 组件深处继续调试，但没有成功？

如何解决这个问题？

Answer 1

TitlePane 打开时会播放动画。在“显示”事件上打开选择下拉菜单还为时过早，TitlePane 容器尚未准备好。您需要等待动画完成。 TitlePane 中的内部打开动画对象是 _wipeIn，您可以在其 onEnd() 函数后添加一个切面。

require([
  "dijit/TitlePane",
  "dijit/form/Select",
  "dojo/data/ObjectStore",
  "dojo/store/Memory",
  "dojo/on",
  "dojo/aspect",
  "dojo/domReady!"
], function(TitlePane, Select, ObjectStore, Memory, on, aspect) {

  var store = new Memory({
    data: [
      { id: "foo", label: "Foo" },
      { id: "bar", label: "Bar" }
    ]
  });

  var os = new ObjectStore({ objectStore: store });

  var s = new Select({store: os});
  s.startup();
  
  var tp = new TitlePane({title:"I'm a TitlePane", content: s, open: false});
  tp.placeAt("content");
  tp.startup();
  
  /*
  // This does not work:
  on(tp, "Show", function() {
    s.loadAndOpenDropDown();
  });
  */
  
  // This works:
  aspect.after(tp._wipeIn, "onEnd", function() {
      s.loadAndOpenDropDown();
  });
  
  on(tp, "Hide", function() {
      s.closeDropDown();
  });
});

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">

<div class="claro">
  <div id="content"></div>
</div>