[Dojo-interest] adding content to the right side of a titlepane header

[Peter E Higgins]

Micah J Freedman wrote:
>> something like:
>>
>> dojo.declare("my.TitlePane",dijit.TitlePane, {
>>       postCreate: function(){
>>             this.inherited(arguments);
>>             this.extraTitleNode = dojo.place("<button>hi!</button>",
>> this.titleNode);
>>             dojo.style(this.extraTitleNode, "float","right"); // or
>> with
>> classes, or whatever
>>       }
>> });
>>     
>
> Thanks, I'm new to extending dojo like this, so this is very helpful. Two questions:
>
> 1) If I want to use a dijit in there, how do I get it to parse? This places the node, but leaves it as a vanilla button:
>
> 	dojo.provide("my.ButtonTitlePane");
> 	dojo.declare("my.ButtonTitlePane",dijit.TitlePane, {
> 		  postCreate: function(){
> 				this.inherited(arguments);
> 				this.extraTitleNode = dojo.place('<button dojoType="dijit.form.Button">With a Button</button>', this.titleNode, 'before');
> 				dojo.parser.parse(this.extraTitleNode);
> 				dojo.style(this.extraTitleNode, "float","right"); 
> 		  }
> 	});
>
>   
parsing extraTitleNode skips the root node (only looks for children). I
would do it programatically:

this.extraTitleButton = new dijit.form.Button({
     // we can mix in props from the parent by naming them.
     label: this.extraTitleLabel
}).placeAt(this.titleNode, "first");
dojo.style(this.extraTitleButton.domNode, "float", "right");
// or give it a unique class or something that would apply float:right
in css

to make the parser pickup the "extraTitleLabel" attribute, add it to
your declare call. Typically, you supply a default.

dojo.decalre("my.SubClass", dijit.TitlePane, {
   extraTitleLabel:"foo"
});

That should cover #2 and #1

If you really want to use the parser(), just be sure to parse scoped to
titleNode or some other parent node (but avoid doing the whole .domNode
of the titlePane, as that will parse containerNode too, which may or may
not have other widgets already in it.

Regards,
Peter
> 2) How might I paramaterize this so I can pass in either the button node itself, or some kind of reference to it? E.g.:
>
> 	<div dojoType="my.ButtonTitlePane" 
> 		title="Button TitlePane" 
> 		extraTitleNode='<button dojoType="dijit.form.Button">With a Button</button>'>
> 		Content
> 	</div>
>
> or perhaps this would be better:
>
> 	<button id="myButton" dojoType="dijit.form.Button">With a Button</button>
> 	<div dojoType="my.ButtonTitlePane" 
> 		title="Button TitlePane" 
> 		extraTitleNode="myButton">
> 		Content
> 	</div>
>
> TIA!
>
>
> This communication is for informational purposes only. It is not
> intended as an offer or solicitation for the purchase or sale of
> any financial instrument or as an official confirmation of any
> transaction. All market prices, data and other information are not
> warranted as to completeness or accuracy and are subject to change
> without notice. Any comments or statements made herein do not
> necessarily reflect those of JPMorgan Chase & Co., its subsidiaries
> and affiliates.
>
> This transmission may contain information that is privileged,
> confidential, legally privileged, and/or exempt from disclosure
> under applicable law. If you are not the intended recipient, you
> are hereby notified that any disclosure, copying, distribution, or
> use of the information contained herein (including any reliance
> thereon) is STRICTLY PROHIBITED. Although this transmission and any
> attachments are believed to be free of any virus or other defect
> that might affect any computer system into which it is received and
> opened, it is the responsibility of the recipient to ensure that it
> is virus free and no responsibility is accepted by JPMorgan Chase &
> Co., its subsidiaries and affiliates, as applicable, for any loss
> or damage arising in any way from its use. If you received this
> transmission in error, please immediately contact the sender and
> destroy the material in its entirety, whether in electronic or hard
> copy format. Thank you.
>
> Please refer to http://www.jpmorgan.com/pages/disclosures for
> disclosures relating to European legal entities.
> _______________________________________________
> FAQ: http://dojotoolkit.org/support/faq
> Book: http://dojotoolkit.org/docs/book
> Forums: http://dojotoolkit.org/forum
> Dojo-interest at mail.dojotoolkit.org
> http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
>
>   


-- 
Peter E Higgins
Dojo Project Lead : http://dojotoolkit.org