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

Posted

技术标签:

【中文标题】将 dojox.datagrid 注入 dijit.layout.contentpane 到 dijit.layout.tabcontainer 时出现问题【英文标题】:Problem injecting a dojox.datagrid into a dijit.layout.contentpane into a 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>

【问题讨论】:

【参考方案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%;");

【讨论】:

以上是关于将 dojox.datagrid 注入 dijit.layout.contentpane 到 dijit.layout.tabcontainer 时出现问题的主要内容,如果未能解决你的问题,请参考以下文章

如何在 dojox.datagrid 中实现分页

如何在dojox.datagrid中实现分页

如何将 Dijit 小部件动态添加到 Dojo 表单?

如何将 dijit.form.DateTextBox 的初始值设置为今天?

如何将 Dojox.grid 放入 dijit.Dialog

以编程方式在dijit布局TitlePane中插入dijit内容窗格