Dojo/Dijit TitlePane

Question

How do you make a titlePane's height dynamic so that if content is added to the pane after the page has loaded the TitlePane will expand?

Answer 1

It looks like the rich content editor being an iframe that is loaded asynchronously confuses the initial layout.

As @missingno mentioned, the resize function is what you want to look at.

If you execute the following function on your page, you can see that it does correctly resize everything:

//iterate through all widgets
dijit.registry.forEach(function(widget){
    //if widget has a resize function, call it
    if(widget.resize){
        widget.resize()
    }
});

The above function iterates through all widgets and resizes all of them. This is probably unneccessary. I think you would only need to call it on each of your layout-related widgets, after the dijit.Editor is initialized.

The easiest way to do this on the actual page would probably to add it to your addOnLoad function. For exampe:

    dojo.addOnLoad(function() {
        dijit.byId("ContentLetterTemplate").set("href","index2.html");
        //perform resize on widgets after they are created and parsed.
        dijit.registry.forEach(function(widget){
              //if widget has a resize function, call it
              if(widget.resize){
                  widget.resize()
              }
        });
    });

EDIT: Another possible fix to the problem is setting the doLayout property on your Content Panes to false. By default all ContentPane's (including subclasses such as TitlePane and dojox.layout.ContentPane) have this property set to true. This means that the size of the ContentPane is predetermined and static. By setting the doLayout property to false, the size of the ContentPanes will grow organically as the content becomes larger or smaller.

Answer 2

Layout widgets have a .resize() method that you can call to trigger a recalculation. Most of the time you don't need to call it yourself (as shown in the examples in the comments) but in some situations you have no choice.

Answer 3

I've made an example how to load data after the pane is open and build content of pane.

What bothers me is after creating grid, I have to first put it into DOM, and after that into title pane, otherwise title pane won't get proper height. There should be cleaner way to do this.

Check it out: http://jsfiddle.net/keemor/T46tt/2/

dojo.require("dijit.TitlePane");
dojo.require("dojo.store.Memory");
dojo.require("dojo.data.ObjectStore");
dojo.require("dojox.grid.DataGrid");
dojo.ready(function() {
    var pane = new dijit.TitlePane({
        title: 'Dynamic title pane',
        open: false,
        toggle: function() {
            var self = this;
            self.inherited('toggle', arguments);
            self._setContent(self.onDownloadStart(), true);
            if (!self.open) {
                return;
            }
            var xhr = dojo.xhrGet({
                url: '/echo/json/',
                load: function(r) {
                    var someData = [{
                        id: 1,
                        name: "One"},
                    {
                        id: 2,
                        name: "Two"}];

                    var store = dojo.data.ObjectStore({
                        objectStore: new dojo.store.Memory({
                            data: someData
                        })
                    });
                    var grid = new dojox.grid.DataGrid({
                        store: store,
                        structure: [{
                            name: "Name",
                            field: "name",
                            width: "200px"}],
                        autoHeight: true
                    });
                    //After inserting grid anywhere on page it gets height
                    //Without this line title pane doesn't resize after inserting grid                                                            
                    dojo.place(grid.domNode, dojo.body());
                    grid.startup();
                    self.set('content', grid.domNode);
                }
            });
        }
    });
    dojo.place(pane.domNode, dojo.body());
    pane.toggle();
});​

Answer 4

My solution is to move innerWidget.startup() into the after advice to "toggle".

titlePane.aspect = aspect.after(titlePane, 'toggle', function () {
    if (titlePane.open) {
        titlePane.grid.startup();
        titlePane.aspect.remove();
    }
});

See the dojo/aspect reference documentation for more information.