如何添加按钮到dojo titlepane

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);
}