Dojo: The Definitive Guide

TitlePane

A TitlePane is a widget that always displays a title, but whose body may be expanded or collapsed as needed; the actual resize is done with an animated wipe-in or wipe-out. As a descendant of ContentPane, TitlePane also has access to all of the inherited methods for loading content remotely, although they are not explicitly covered again in this section. (Refer to the previous chapter for complete coverage of ContentPane.) Example 15-5 shows the elementary usage.

Example 15-5. Typical TitlePane usage

<div dojoType="dijit.TitlePane" title="Grocery list:" style="width:300px">
    <ul>
        <li>Eggs</li>
        <li>Milk</li>
        <li>Bananas</li>
        <li>Coffee</li>
    </ul>
</div>

TitlePane supports the feature set shown in Table 15-8.

Table 15-8. TitlePane API

Name	Type	Comment
title	String	The title of the pane.
open	Boolean	Whether the pane is opened or closed. true by default.
duration	Integer	The number of milliseconds the animated wipe should last. 250 by default.
setContent(/*DomNode|String*/)	Function	Used to programmatically set the contents of the pane.
setTitle(/* String */ title)	Function	Sets the title.
toggle( )	Function	If the pane is opened, this closes it. If closed, then opens it.

Although you could use TitlePane as a static artifact on your page, you might soon find interesting uses for it as a more interactive kind of control. Consider, for example, how easy it would be to use it to mimic the kind of sticky note that you see in so many applications. Getting a simple widget working is as easy as inserting ...