Problem injecting a dojox.datagrid into a dijit.layout.contentpane into a dijit.layout.tabcontainer

Question

didn't work in FF. Did I use the right function order of grid, tabStudios, tabContainer and startups? Neither the tabcontainer nor the grid have been injected. Has someone a suggestions for this problem?

dojo.addOnLoad(function() {
    var tabContainer=new dijit.layout.TabContainer({region:"center",id:"studio-tab"});
    var tabStudios=new dijit.layout.ContentPane({title:"Studioliste",id:"studios"});
    var readStore=new dojox.data.QueryReadStore({url:"index/studiolistdata",requestMethod:"post"});
    var grid=new dojox.grid.DataGrid({store:readStore,
                                      id:"studiolistgrid",
                                      rowsPerPage:30,
                                      delayScroll:true,
                                      structure:'.Zend_Json::encode($attr).',
                                      loadingMessage:"Loading..."
                                     });

   //problems start here

   grid.placeAt(tabStudios.containerNode);
   grid.startup();

   tabStudios.placeAt(tabContainer);
   tabStudios.startup();

   tabContainer.placeAt(dijit.byId("studio-content").containerNode);
   tabContainer.startup();

   //problems hopefully ended here
 });

<div id="studio-content" dojoType="dijit.layout.ContentPane" region="center">

    <ul>
      <li>XY</li>
      <li>XZ</li>
      <li>YY</li>
    </ul>

</div>

Answer 1

The only solution I find was to change the ContentPane into a BorderContainer and placeAt my TabContainer within the DataGrid into it. This works fine for me in Firefox and IE7.

changes:

- tabContainer.placeAt(dijit.byId("studio-content").containerNode);
+ tabContainer.placeAt(dijit.byId("studio-content"),"only");

....

-<div id="studio-content" dojoType="dijit.layout.ContentPane" region="center">
-  <ul>
-    <li>XY</li>
-    <li>XZ</li>
-    <li>YY</li>
-  </ul>
-</div>

+<div id="studio-content" dojoType="dijit.layout.BorderContainer" region="center">
+  <div dojoType="dijit.layout.ContentPane" region="center">
+    <ul>
+      <li>XY</li>
+      <li>XZ</li>
+      <li>YY</li>
+    </ul>
+  </div>
+</div>