将 dojox.datagrid 注入 dijit.layout.contentpane 到 dijit.layout.tabcontainer 时出现问题答案

【问题标题】：Problem injecting a dojox.datagrid into a dijit.layout.contentpane into a dijit.layout.tabcontainer将 dojox.datagrid 注入 dijit.layout.contentpane 到 dijit.layout.tabcontainer 时出现问题
【发布时间】：2009-09-18 15:50:00
【问题描述】：

在 FF 中不起作用。我是否使用了正确的网格、tabStudios、tabContainer 和启动函数顺序？ tabcontainer 和 grid 都没有被注入。有人对这个问题有什么建议吗？

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>

【问题讨论】：

标签： grid dojo

【解决方案1】：

我意识到这是一年前的事了，我不知道它是否相关，但我发现这个线程在谷歌搜索中排名靠前的关于 datagrids 没有加载到 contentPanes 中。

这里的问题是您使用的是不执行脚本的 dijit.layout.ContentPane；甚至没有 alert('test');.

您需要使用具有 executeScripts 功能的 dojox.layout.ContentPane（并且默认启用）。

关于这个问题的解决方案真的没有什么好说的了，但我写了一篇博客： http://www.rvdavid.com.au/contentpane-in-dojo-not-loading-scripts-this-is-how-you-fix-it/

这让我非常恼火，以至于我花了很长时间才找到这么简单的解决方案。

所以我在 1 年后在这里发布答案，以防更多人遇到这个问题并发现自己在这个 SO 问题上。

我希望有人觉得它有用。

干杯。

【讨论】：

好吧，如果我能阅读您位于已过期域上的博客，这可能会有所帮助。 . . :)
抱歉，更新了指向新域的链接。我有一段时间对博客失去了兴趣，实际上让它过期了。最近弄了一个新的域名，心想啊，看来我可以把它放上来了。 rvdavid.com.au/… 不过请注意，它已经超过 5 岁了。 :) 希望它仍然是最新的。

【解决方案2】：

我找到的唯一解决方案是将 ContentPane 更改为 BorderContainer 并将 DataGrid 中的 TabContainer 放入其中。这在 Firefox 和 IE7 中对我来说很好。

变化：

- 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>

【讨论】：

【解决方案3】：

面临同样的问题，就像无法在 tabcontainer/contentpane 中看到/加载网格一样。通过后，观察到网格将在内容窗格加载之前加载，所以

在加载内容窗格后尝试加载网格。
或为内容窗格提供一些默认宽度和高度。

使用了选项 2，它奏效了。如下使用：

var conPane= new ContentPane({"style":width:90%;"});

【讨论】：