Loading data grid in dojo during runtime

Question

I'm building a web-application in JavaScript using the dojo framework. I want to create new tabs during runtime (I have a TabPane and add ContentPanes) and want to create data grids in that Panes. (Specificly LazyTreeGrids but they extend the data grid class so it should be the same)

When I do this I get several errors:

ReferenceError
../dojo-release-1.7.2-src/dojo/_base/Deferred.js:216
Error parsing in _ContentSetter#Setter_dijit_layout_ContentPane_0_0 
ReferenceError
../dojo-release-1.7.2-src/dijit/layout/ContentPane.js:543
Error undefined running custom onLoad code: This deferred has already been resolved 

When I run the TabPane without the data grid or if I run the data grid without the TabPane (and at page load) it works just fine. Do you have any ideas how I could solve my problem?

The relevant code:

 dojo.ready(function(){
    var tabPanel = new dijit.layout.TabContainer({
        style: "height: 100%; width: 100%;"
    }, "mainWindow");

    //console.error("tset");
    var console = new contentPane.console("test");  


    var cp1 = new dojox.layout.ContentPane({
         title: "HomeScreen",
         content: ""
    });

    tabPanel.addChild(cp1);

    var cp2 = new dojox.layout.ContentPane({
         title: "+",
        content: ""
    });
    tabPanel.addChild(cp2);

    tabPanel.startup();

    require(["dojo/dom-attr"], function(domAttr){
        domAttr.set(cp1, "content", console.getContent() );
    });

});

Answer 1

You have to make sure the pane is loaded before starting the grid. Note that you could have the grid being the direct child of the TabContainer. tabContainer.addChild(myGrid);