2012-03-22 11 views
0

私はDojo Toolkitを初めて使用して以来、どこかで何かを逃してしまったと確信しています。私はまたstackoverflowに新しいですので、私はこのフォーラムに参加し、スタイリングと書式設定の権利を得るの細かい点を学ぶように私と一緒にご負担ください...dojoツールキット1.7.1:xhrgetはStackContainerでDataGridの完全なレンダリングを許可していませんか?

私はdojox.layout.ContentPanesの中に読み込もうとしていますa stackContainer htmlコンテンツと関連するDojoモジュールとjavascriptを使用して、データグリッドとミーティングを成功裏にサポートします。宣言型のアプローチを使うとうまくいくようですが、xhrGetを使ってstackContainerにContentPanesをロードするプログラム的なアプローチを試してみるといくつかの問題があります。私は宣言的なものよりもプログラム的な方法を好んでいます。それは、私の考えでは、よりモジュラ性の高い保守可能な設計を可能にするからです。私は問題にぶつかっているので、htmlとjavascriptをモジュール化して保守していくために、私がやろうとしていることを実現する別の方法がなければならないと考える必要があります。私はデザインの制約を確立するためにはるかに多くがあることを認識していますが、これは最初に行う必要があります。

以下のコードの抽出をいくつか提供しますが、全体的なデザインは境界レイアウトコンテナを使用して1つのWebページをセットアップし、次にcontentPanesでtitlePaneとstackContainerを保持します。左側をナビゲーションパネルとして実行するリンクを使用して、対応するcontentPane内に表示される対応するhtmlページをフックし、続いてクリックで対応するリンクを選択すると表示されます。これは一点にはうまくいく。 contentPaneに直接埋め込まれた宣言的なDataGridの表は、データが適切に描画され、グリッドや、claroやtundraなどの選択されたDojoスタイルの書式設定とCSSスタイルが正しく動作するように見えます。しかし、DataGridをxhrGetからcontentPaneに読み込んで別のhtmlページとして表示しようとすると、htmlページのコンテンツが表示されますが、JavascriptやDojoモジュールはアクティブ化されておらず、DataGridのヘッダは部分的に表示されますが、データのデータが入力されます。限られた程度でCSSの書式設定が機能しているように見えますが、どれだけ理解するためにはより多くの研究と評価が必要です。

この時点で、私が使用しているプログラム的なアプローチは部分的に機能しているようで、DataGridにデータを取り込み、ボタンを正しく起動させることができませんでした。これは単なるDojoの制限ですが、ウェブサイトの実装を整理してモジュール化するためのアプローチとして、大部分が使用する根本的なユースケースと考えていました。うまくいけば、経験豊富なDojo Toolkitのユーザー/開発者が、私が逃したより良いやり方を教えてくれることを願っています。前にも述べたように、わかりやすくするために追加のコードスニペットを用意しています。ここで復習が問題を形成アウトラインにあります:

ここでは私のために働いているものです:dijit.TitlePaneを使用して 1.私は内部ContentPanes間のナビゲーションを提供し、左サイドダウン を実行しているリンクのメニューの基本的な枠組みを持っていますStackContainer hrefを使用して、問題なくContentPane内のページをプルアップすることができます。全体的にこれは本当にうまく動作します。 2.内容ペインにHTML形式のページを表示することができます 3.宣言的な手法を使用すると、stackContainerの指定されたcontentPaneに静的に生成されたDataGridがレンダリングされ、主呼び出しのjavascriptによって参照できるため、そのページとDataGridが存在するhtmlが同じであるためです。 4.個々のhtmlページには、スタンドアロンで表示してDataGridを適切にレンダリングおよび設定できるjavascriptおよびdojoモジュールが含まれています。

ここではうまくいきません: 1.ロードされたhtmlページに関連付けられたJavascriptは実行されません。 2。htmlページがxhrGetのコンテンツ ページに読み込まれると、DataGridにデータが入力されません。
3. ContentPanesでのプログラムによるDataGridの生成はまったく表示されません。

私はレンダリングするデータグリッドを発射し、道場リモートJavaScriptを取得しようとしているいくつかのもの: 1. コンテナでdojox.layout.ContentPaneと リモートページでtrueに設定されたスクリプトを実行するためのAttachEventを設定します。 dijitの上dojox.layout.ContentPaneの使用を指定 7 dojo.parser.parse stackcontainer.resize 5のgrid.resizeのgrid.restart 4. 3. 接続の使用2. xhrPost 6 .layout.ContentPane

私はこれらのオプションを正しく実装したと言っているわけではありません。このオプションの1つが正しく動作するように設定しようとしているようですステップとキーポイントは高く評価されています。

いくつかの関連する質問: 1. contentPane内に表示される別のhtmlページと呼ばれる場合、ウィジェットIDの彼の場所をトレースする最良の方法は何ですか? 2. setContentは、DataGridを更新するために使用できるメソッドですか?

ここで考慮すべきコードのいくつかのスニペットは、(フォーマットは読みにくいか、私はHTMLがそうフォローアップ記事で試すことが正しくロードされますかはわからない欠落している場合、私は事前に謝罪)...です:

ページの読み込み(遠くの下HTML)を行い

いくつかのJavascript:

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

第二セット ... `

.... ... 私は2つだけcontentPanesを示すが、実際にコードを作業中に私がロードされるなど、多くの個々のページのためのcontentPanesを持っています。コンテンツの表示とそれぞれの対応するcontentPaneへのナビゲーションが機能します。

経験豊富なDojoのマスターが、私がこの欠陥を見つけたり、私がやるべきことを達成するのに役立つ良いスキームを考えてくれることを願ってください。うまくいけば、私は十分な詳細と説明を提供しました。すべて

+0

私はdojox.layoutを使用しました。contentPaneはリモートHTMLページを保持し、stackContainerにはdijit.layout.contentPaneが使用されます。 dojox.layout.contentPaneはstackContainerの子にはなりません。dojo/methodを使用して特定のcontentPaneにスクリプトを割り当てる方法としてdojox.layout.contentPaneが識別されているようです。 –

+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); } ' –

答えて

0

よろしく私の知る限りではdijit.layout.ContentPaneはそれでdijits /ウィジェットを探すためにHTMLを解析しません。代わりにdojox.layout.ContentPaneを使用して、読み込んだ後にパーサーを呼び出すことができます。

+0

ありがとうございます。いい答えだ。私は確かにこれを見ました...しかし、まだ成功していません。私が使用しているスタンドアロンページはdojox.layout.ContentPaneを使用していて問題はなく、ContentPaneがマークアップ階層にある他のすべての場所をリワークしようとしましたが、xhrgetを使用したスタンドアロンページのリモートロードは失敗します。 ContentPanesにリモートでロードされたページを持っている私にとっては、Dojoを使用するのは明らかです。答えにもう一度感謝します。私はもっ​​と掘り起こす必要がある。 –

+0

私はあなたがxhrページを取得してコンテンツを設定する必要はないと思っていますが、ロードするページにyourContentPaneのURLを設定してください。 ContentPaneは読み込み+解析の作業を行います – PEM

0

ここでは、階層の最上部にあるdojox.layout.ContentPanesの再作成の例を示します。まだ結果が表示されません。私は、index/main htmlページの関数呼び出しでバブルアップしたclickイベントをキャプチャできますが、同じ関数はロードされたhtmlページで起動しないことに気付きました。私はまた、様々な場所では実際に実行スクリプトを設定しようとしましたが、運はありません。まだ掘っている

'<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>' 
関連する問題