How to add buttons to dojo titlepane - dojo

Question

Is there any way to add buttons to TitlePane header(right side of title bar), so that i can do some operations(download,delete...)
Thanks in advance.

Answer 1

dijit TitlePane header contains the following
<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>
As you see there are several attach points we can reference.
To add any item, even a dijit or custom widget do the following to place items after the last in the focusNode attach point (note: you have to style it correctly in order for items to appear in the position you want)
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);
This will produce something that looks like this,
Or you can replace everything and create whatever you want in the focusNode.

Answer 2

There is. I was able to do it using the .placeAt() method in the added dijit's creation, such as below:
In index.htm
<div id="divMap"></div>
In main.js within callback
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);
}