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 something like a Textarea into TitlePane, and retitling it whenever it closes, as shown in Example 15-6.

Example 15-6. Simulating a sticky note with a TitlePane

dojo.addOnLoad(function(  ) {
    var ed = new dijit.form.Textarea({id : "titlePaneContent"});
    dijit.byId("tp").setContent(ed.domNode);
});

//And now for the ContentPane, which you might declare in markup:

<div id="tp" dojoType="dijit.TitlePane" style="width:300px">
   <script type="dojo/connect" event="toggle">
        if (!this.open) {
            var t = dijit.byId("titlePaneContent").getValue(  );
            if (t.length > 15)
                t = t.slice(0,12)+"...";
            this.setTitle(t);
        }
    </script>
</div>

A little additional styling and some drag-and-drop action takes you just about the whole way towards having a small sticky-notes application.