2012-03-22 43 views
0

由於我剛剛使用Dojo Toolkit,並且正在尋找一些更有經驗的手來啓發我,我確定我錯過了某處。我也是新來的stackoverflow,所以請耐心與我一起,因爲我知道參加這個論壇,並獲得造型和格式正確的更精細的點...dojo工具包1.7.1:xhrget不允許在StackContainer中完整呈現DataGrid?

我試圖加載到dojox.layout.ContentPanes裏面一個stackContainer 的html內容和相關的Dojo模塊和javascript支持DataGrid和混合成功的會議。使用聲明式方法似乎工作得不錯,但嘗試使用xhrGet將程序化方法加載到stackContainer中的ContentPanes存在一些問題。我更喜歡使用聲明式的編程方法,因爲在我看來,它會允許更模塊化和可維護的設計。由於我遇到問題,我不得不認爲必須有另一種方法可行,並且將以保持html和javascript模塊化和可維護的方式來實現我所要做的。我意識到建立設計約束還有很多,但這必須作爲一個開始。

我將在下面和後續提供一些代碼摘錄,但總體設計是使用邊界佈局容器設置單個網頁,該容器反過來將titlePane和stackContainer與contentPanes保持在一起。使用左側的鏈接作爲導航面板,我已經掛鉤了相應的html頁面,這些html頁面依次顯示在相應的contentPanes內部,隨後在點擊選擇相應的鏈接時顯示。這非常有用。直接嵌入到contentPane中的聲明式DataGrid表格似乎可以正確呈現,並且填充正確填充網格的數據和選定的Dojo樣式格式(如claro或苔原和CSS樣式似乎按預期方式工作)。但是,如果我嘗試以編程方式顯示DataGrid,通過將xhrGet完全加載到contentPane作爲單獨的html頁面來顯示html頁面內容,但似乎JavaScript或Dojo模塊未激活,並且DataGrid部分顯示了其標題,但沒有的數據被填充。 CSS格式似乎在有限的程度上工作,但需要更多的研究和評估來了解多少。

所以在這一點上,我正在使用的編程方法似乎部分工作,我一直無法獲得DataGrid來填充或獲得一個按鈕來正確觸發。也許這只是一個Dojo的限制,但我會認爲這是一個基本的用例,大多數用作他們的方法來組織和模塊化他們的網站實現。希望一些更有經驗的Dojo Toolkit用戶/開發人員能夠以更好的方式或者我錯過的東西來啓發我。如前所述,爲了清楚起見,我很樂意提供額外的代碼片段。下面是一個大綱概括形成的問題:

這裏是爲我工作: 1.使用dijit.TitlePane我有運行 左側向下,其提供內部ContentPanes之間的導航鏈接菜單的基本框架 StackContainer。使用href,我可以在 ContentPane內部拉出一個頁面,而不會出現任何問題。總的來說,這真的很好。 2.內容窗格可以顯示HTML格式的頁面 3.使用聲明式方法靜態生成的DataGrid直接放置在StackContainer渲染的指定內容窗格中並正確填充數據,因爲它們能夠被主要調用的JavaScript引用因爲該頁面和DataGrid所在的html是相同的。 4.包含javascript和dojo模塊的獨立html頁面可以獨立顯示,並正確呈現和填充DataGrid。

以下是什麼不起作用: 1.與加載的html頁面關聯的Javascript不執行。 2。如果使用xhrGet將html頁面加載到內容 頁面中,DataGrid不會填充數據。
3.在ContentPanes中編程生成DataGrid根本不顯示。

有些事情,我都試圖讓遠程JavaScript火災和道場的DataGrid渲染: 1.設立的attachEvent與容器和遠程頁面設置爲true 執行腳本dojox.layout.ContentPane。 2.使用連接 3.使用grid.resize grid.restart的 4.使用stackcontainer.resize的 5. xhrPost 6. dojo.parser.parse 7.指定使用dojox.layout.ContentPane超過的dijit .layout.ContentPane

我不是說我已經正確實現了這些,只是我做了一個嘗試,所以如果其中一個選項似乎是正確配置我試圖做的事情,那麼任何詳細步驟和重點非常感謝。

一些相關的問題: 1.什麼是跟蹤如果 它被稱爲是一個contentPane的內部顯示單獨的HTML頁面控件ID的他位置的最佳方法? 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。

希望更有經驗的道場大師能夠幫助我找到缺陷或提出一個更好的方案來幫助我實現我準備要做的事情。希望我已經提供了足夠的細節和解釋。

問候所有

+0

請注意,我使用了dojox.layout。contentPane用於保存遠程html頁面,並使用stackContainer中的dijit.layout.contentPane。看起來,dojox.layout.contentPane不能是stackContainer的子節點,並且dojox.layout.contentPane已被id'd作爲使用dojo/method將腳本分配給特定contentPane的方式。 – 2012-03-22 17:06:29

+0

爲了清楚起見,我忘了在上面的代碼中包含大括號: 'function loadContent(targetID){ var targetElement = targetID +「.html」; \t dojo.xhrGet({ URL:targetElement, handleAs: 「文本」, 手柄:功能(響應){ VAR節點= dojo.byId(目標ID).innerHTML; dojo.byId(目標ID).innerHTML =響應; } });var selectedPane = dijit.byId(「contentStack」)。selectChild(targetID); }' – 2012-03-22 17:14:01

回答

0

據我所知dijit.layout.ContentPane不解析HTML來尋找它的dijits /小部件。您可能需要使用dojox.layout.ContentPane,它會在加載後調用解析器?

+0

謝謝。好答案。我的確看過這個......但還沒有找到成功。我使用的獨立頁面使用了dojox.layout.ContentPane,並且沒有任何問題,並且我試圖對ContentPane處於標記層次結構中的所有其他位置進行返工......但是使用xhrget遠程加載獨立頁面失敗。對我來說,將頁面遠程加載到ContentPanes中似乎是Dojo的一個明顯用法。再次感謝您的答覆。我需要做更多的挖掘。 – 2012-03-23 16:02:33

+0

我不認爲你應該xhr獲取頁面然後設置內容,而是將yourContentPane的url設置爲你想要加載的頁面。 ContentPane將執行加載+解析的工作 – PEM 2012-03-26 13:46:35

0

下面是層次結構頂部dojox.layout.ContentPanes的返工工作示例。仍然沒有看到任何結果。我注意到我可以捕獲在index/main html頁面中使用函數調用冒泡的click事件,但是相同的函數在加載的html頁面中不會觸發。我也嘗試在各個地方將執行腳本設置爲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>'