Question

我确定我已经错过了某些地方，因为我刚接触使用Dojo Toolkit并且正在寻找一些更有经验的人来启发我。我也是stackoverflow的新手，所以请耐心等待，因为我学习了参与这个论坛的更好点，并获得了正确的样式和格式......

我正在尝试加载到stackContainer中的dojox.layout.ContentPanes html内容和相关的Dojo模块和javascript支持DataGrid并且会议取得了成功。使用声明性方法似乎运行良好，但尝试使用xhrGet在stackContainer中加载ContentPanes的编程方法会出现一些问题。我更喜欢编程方法而不是声明方法，因为在我看来，它将允许更模块化和可维护的设计。由于我遇到了问题，我不得不认为必须有另一种方法可行，并且将完成我试图保持html和javascript模块化和可维护的方式。我意识到建立设计约束还有很多，但这必须作为一个开始。

我将在下面和后续内容中提供一些代码摘录，但总体设计是使用边界布局容器设置单个网页，而边界布局容器又使用contentPanes保存titlePane和stackContainer。使用从左侧向下运行的链接作为导航面板，我已连接相应的html页面，这些页面依次显示在相应的contentPanes内，随后在单击时选择相应的链接时显示。这很有效。直接嵌入在contentPane中的声明性DataGrid表似乎正确地呈现正确填充网格的数据和所选择的Dojo样式格式，例如claro或tundra和CSS样式，看起来像预期的那样工作。但是，如果我尝试以编程方式显示DataGrid，方法是将完全通过xhrGet加载到contentPane中作为单独的html页面显示html页面内容，但似乎没有激活Javascript或Dojo模块，并且DataGrid部分显示其标题但没有数据的填充。 CSS格式确实似乎在有限的程度上起作用，但需要更多的研究和评估才能理解多少。

所以在这一点上，我使用的程序化方法似乎部分工作，我无法让DataGrid填充或正确触发按钮。也许这仅仅是一个Dojo限制，但我认为它是大多数用作组织和模块化其网站实现的方法的基本用例。希望一些更有经验的Dojo Toolkit用户/开发人员能够以更好的方式或我错过的方式启发我。如前所述，我很乐意为了清晰起见提供额外的代码片段。以下是问题的概述：

这里有什么对我有用的： 1.使用dijit.TitlePane我有一个运行链接菜单的基本框架在左侧，提供内部ContentPanes之间的导航 StackContainer。使用href我能够在内部拉出一个页面 ContentPane没有问题。总的来说这很有效。 2.内容窗格可以显示HTML格式的页面 3.使用声明方法静态生成的DataGrids直接放置在stackContainer的指定contentPanes内，并正确填充数据，因为它们能够被主调用页面的javascript引用，因为该页面和DataGrids所在的html是相同。 4.包含javascript和dojo模块的单个html页面，可以单独显示并正确渲染和填充DataGrid。

这里有什么不起作用： 1.与加载的html页面关联的Javascript不会执行。 2.如果将html页面加载到内容中，DataGrid不会填充数据 xhrGet页面。
3.在ContentPanes中以编程方式生成DataGrids根本不显示。

我试图让远程javascript触发并使用dojo DataGrid进行渲染： 1.使用容器设置AttachEvent到dojox.layout.ContentPane 在远程页面中执行脚本设置为true。 2.使用连接 3.使用grid.resize grid.restart 4.使用stackcontainer.resize 5. xhrPost 6. dojo.parser.parse 7.在dijit.layout.ContentPane上指定使用dojox.layout.ContentPane

我并不是说我已经正确地实现了这些，只是我做了一次尝试，所以如果其中一个选项似乎是正确配置我试图做的事情的话非常感谢详细的步骤和关键点。

一些相关问题： 1.如果跟踪小部件ID的位置，最好的方法是什么？它被称为单独的html页面，显示在contentPane中？ 2. setContent是一个可用于刷新DataGrid的方法吗？

这里有一些要考虑的代码片段...（如果格式化难以阅读或遗漏，我提前道歉我不确定HTML是否会正确加载，因此可以尝试后续跟进交的）：

一些用于加载页面的Javascript（下面的HTML更远）：

       function loadContent(targetID) {
            var targetElement = targetID + ".html";
        dojo.xhrGet({
              url: targetElement,
              handleAs: "text",
              handle: function(response){
                   var node = dojo.byId(targetID).innerHTML;
                   dojo.byId(targetID).innerHTML = response;

                }
            });
            var selectedPane = dijit.byId("contentStack").selectChild(targetID);

         function trackLinkClick(targetID) {
              dojo.query("li *").onclick(function(evt){
                                dojo.stopEvent(evt);
                                var grid_box;
                                var targetID = evt.target.getAttribute("href").split("#")[1];
                                loadContent(targetID);

                            }
                    );
              return targetID;
         }

HTML：

   `<body class="claro">`
   `<div id="preloader"></div>`
   `<div id="main" class="tpsMain dijitContainer dijitLayoutContainer"` 
   `dojoattachpoint="containerNode" dir="ltr" widgetid="main">`
   `<div id="dijit_layout_BorderContainer_0" class="dijitContainer` 
   `dijitBorderContainerNoGutter" lang="" gutters="true"` 
   `dojotype="dijit.layout.BorderContainer" dir="ltr"` 
   `widgetid="dijit_layout_BorderContainer_0" style="padding: 0px; left: 0px; top 0px; width: 1450px; height: 800px;">`
   `<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">Title</div>`
   `<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" title= "Content Panel" data-dojo-props="region:'center'">`
   `<div id= "contentStack" data-dojo-type="dijit.layout.StackContainer"  data-dojo-id="contentStack" region= "center">`
   `<div data-dojo-type="dijit.layout.ContentPane" id= "content_pane_1">First Set of Content</div>`
   `<div data-dojo-type="dijit.layout.ContentPane" id= "content_pane_2">

第二组内容... ... ... `

.... ... 我只展示了两个contentPanes，但在实际工作的代码中，我有contentPanes可以加载多个单独的页面。显示内容并导航到每个相应的contentPane工作。

希望更有经验的道场大师能够帮助我找到缺陷或提出更好的方案来帮助我实现我想要做的事情。希望我已经提供了足够的细节和解释。

关心所有

Answer 1

据我所知dijit.layout.ContentPane不会解析html以查找其中的dijits / widgets。您可能想要使用dojox.layout.ContentPane，它在加载后调用解析器？

Answer 2

以下是在层次结构顶部重新处理dojox.layout.ContentPanes的示例。仍然没有看到任何结果。我注意到我可以捕获在index / main html页面中使用函数调用冒泡的click事件，但是相同的函数不会在加载的html页面中触发。我也尝试在各个地方将executioncripts设置为true但没有运气。所以还在挖掘。

   '<div id= "contentStack" data-dojo-type="dijit.layout.StackContainer"  data-dojo-id="contentStack" region= "center">'
   '<div data-dojo-type="dojox.layout.ContentPane" id= "contentpane1">'
   'First Set of Test Content'
   '</div>'
   '<div data-dojo-type="dojox.layout.ContentPane" id= "contentpane2">'
   'Second Set of Test Content'
    '</div>'

dojo toolkit 1.7.1：xhrget不允许在StackContainer中完全呈现DataGrid？

2 个答案: