Hi
I created new Widget which acts as TitlePane with one addition it has ToolBar which replaces the Title.
Only clicking the arrow expands/collapse the Title Pane
In the Title you can put text before the Combo Box and after the Combo Box and you can set the Menu Items of the Text Box.
I didn't manage to do it programatically only using the mark up template and the replace parameters.
1. The Template File - TitleToolBarPane.html
<div class="dijitTitlePane">
<div dojoAttachEvent="onkeypress: _onTitleKey,onfocus:_handleFocus,onblur:_handleFocus" tabindex="0"
waiRole="button" class="dijitTitlePaneTitle" dojoAttachPoint="focusNode">
<div dojoAttachPoint="arrowNode" dojoAttachEvent="onclick:toggle" class="dijitArrowNode"><span dojoAttachPoint="arrowNodeInner" class="dijitArrowNodeInner"></span></div>
<div dojoAttachPoint="titleNode" class="dijitTitlePaneTextNode">
<div dojoType='dijit.Toolbar'>
<span class='titlepanetext'>${pretext}</span>
<div dojoType='dijit.form.ComboButton'>
<span class="blue2Text">${selectedText}</span>
<div dojoType='dijit.Menu' style='display: none;'>
${menuitems}
</div>
</div>
<span class='titlepanetext'>${posttext}</span>
</div>
</div>
</div>
<div class="dijitTitlePaneContentOuter" dojoAttachPoint="hideNode">
<div class="dijitReset" dojoAttachPoint="wipeNode">
<div class="dijitTitlePaneContentInner" dojoAttachPoint="containerNode" waiRole="region" tabindex="-1">
<!-- nested divs because wipeIn()/wipeOut() doesn't work right on node w/padding etc. Put padding on inner div. -->
</div>
</div>
</div>
</div>
2. The JS Widget - TitleToolBarPane.js
dojo.provide("iyp.widget.TitleToolBarPane");
dojo.require("dijit._Templated");
dojo.require("dijit.TitlePane");
dojo.require("dijit.Toolbar");
dojo.require("dijit.Menu");
dojo.declare(
"iyp.widget.TitleToolBarPane",
[dijit.TitlePane],
{
// summary
// Title Pane where Title contains Tool Bar with some Text on it
//
pretext: "",
selectedText: "",
menuitems:"",
posttext:"",
templatePath: dojo.moduleUrl("iyp","widget/templates/TitleToolBarPane.html"),
// Necessary to keep Dijit from using templateString in TitlePanePlus
templateString: "",
setTitle: function(/*String*/ title){
// summary: sets the text of the title
dojo.parser.parse(this.titleNode);
}
});
3. Some CSS hacks to make it look o.k. (For Tundra)
.tundra .dijitTitlePaneFocused .dijitTitlePaneTextNode {
text-decoration:none;
}
.tundra .dijitToolbar {
border: 0px solid #333;
}
.titlepanetext {
border:0px;
padding:0px;
vertical-align:middle;
}
4. Test I used:
<div dojoType="iyp.widget.TitleToolBarPane" id="test2"
pretext="<b>New Businesses</b>   Near"
posttext="  <a href='#'>Link</a>"
selectedText="Home"
menuitems="<div dojoType='dijit.MenuItem' onClick='console.log(33)'>Home</div><div dojoType='dijit.MenuItem' onClick='console.log(44)'>Office</div>"
style="width: 300px;">
Lorem Ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque
</div>