dojo - 如何将按钮添加到 dojo 标题窗格

Question

有什么方法可以将按钮添加到TitlePane标题（标题栏右侧），以便我可以进行一些操作（下载、删除...）

提前致谢。

Answer 1

dijit TitlePane 标头包含以下内容

<div class="dijitTitlePaneTitleFocus" data-dojo-attach-point="focusNode" aria-pressed="true" role="button" aria-controls="dijit_TitlePane_0_pane" tabindex="0">
<span data-dojo-attach-point="arrowNode" class="dijitInline dijitArrowNode" role="presentation"></span><span data-dojo-attach-point="arrowNodeInner" class="dijitArrowNodeInner">-</span><span data-dojo-attach-point="titleNode" class="dijitTitlePaneTextNode" style="user-select: none;">Rule</span>
<span class="dijit dijitReset dijitInline dijitButton" role="presentation" widgetid="dijit_form_Button_1">
<span class="dijitReset dijitInline dijitButtonNode" data-dojo-attach-event="ondijitclick:__onClick" role="presentation">
<span class="dijitReset dijitStretch dijitButtonContents" data-dojo-attach-point="titleNode,focusNode" role="button" aria-labelledby="dijit_form_Button_1_label" tabindex="0" id="dijit_form_Button_1" style="user-select: none;">
<span class="dijitReset dijitInline dijitIcon dijitNoIcon" data-dojo-attach-point="iconNode"></span><span class="dijitReset dijitToggleButtonIconChar"></span>
<span class="dijitReset dijitInline dijitButtonText" id="dijit_form_Button_1_label" data-dojo-attach-point="containerNode">x</span></span></span></span>
</div>     

如您所见，我们可以参考几个附加点。

要添加任何项目，即使是 dijit 或自定义小部件，请执行以下操作以将项目放置在focusNode附加点的最后一个之后（注意：您必须正确设置它的样式才能使项目出现在您想要的位置）

        var myTitlePane = new TitlePane({ title: "TitlePane" });            

        var deleteButton = new Button({
            label: 'x',
            onClick: function () {
                //do something here like delete the titlepane
                //alert();
            }
        });
        deleteButton.placeAt(rulesTitlePane.focusNode);

这将产生看起来像这样的东西，

或者您可以替换所有内容并在 focusNode 中创建您想要的任何内容。

Answer 2

有。我能够在添加的 dijit 的创建中使用 .placeAt() 方法来做到这一点，如下所示：

在 index.htm 中

<div id="divMap"></div>

在回调中的 main.js

ready (function() {
    var ttpMyTitlePane = new TitlePane({
        title: 'My Title'
    });
    divMenu.appendChild(ttpMyTitlePane.domNode);

    var btnMyButton = new Button({
        label: 'ButtonText',
        onClick: function() {
            // do stuff
        } 
    }).placeAt(ttpMyTitlePane.domNode);
}