Dojo tabContainerにDojoコントロールが正しく表示されない

Question

Dojoツールキットを使用して複雑なアプリケーションを作成しようとしています。 メイン・スクリーンには、Dojoのアコーディオン、トップストリップ、およびメイン・ページ新しいタブ左のメニュー上のすべてのヒット、

私は新しいタブのコンテンツに他の道場が

問題があることである等の道場フォームコントロールのようにグリッド（EnhancedGrid）を、制御含む外部ページを表示しようとしますDojoコントロールは、tabContainerの下でDojoコントロールをレンダリングしません。

ここではすべての左のヒットで新しいタブ（ページ）を開いた主な機能：あなたは私のためにあなたの質問に十分な情報を提供しなかった

<div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="liveSplitters:false, design:'sidebar'"> 
     <div id="header" data-dojo-type="dijit.MenuBar" data-dojo-props="region:'top'"> 
      <div data-dojo-type="dijit.MenuBarItem" data-dojo-props="iconClass:'dijitIconDelete'" data-dojo-props="onclick: function(){ alert('no submenu, just a clickable MenuItem'); }"> 
       שולחן עבודה 
      </div> 
      <div data-dojo-type="dijit.MenuBarItem" data-dojo-props="onclick: function(){ alert('no submenu, just a clickable MenuItem'); }"> 
       משימות 
      </div> 

         <div data-dojo-type="dijit.MenuBarItem" data-dojo-props="onclick: function(){ alert('no submenu, just a clickable MenuItem'); }"> 
       התנתק 
      </div> 
     </div> 

     <div data-dojo-type="dijit.layout.AccordionContainer" data-dojo-props="region:'leading', splitter:true, minSize:20, minSize: 100, maxSize:300" style="width: 200px;" id="leftAccordion"> 
      <?php 
      $opened = FALSE; 
      foreach($menues as $menu) 
      { 
       if ($opened == TRUE && $menu->parent == 0) 
       { 
        print '</ul>' . "\n"; 
        print '</div>' . "\n"; 
        $opened = FALSE; 
       } 

       if ($opened == FALSE && $menu->parent == 0) 
       { 
        print "<div data-dojo-type=\"dijit.layout.ContentPane\" data-dojo-props=\"title:'$menu->title'\">" . "\n"; 
        print ' <ul>' . "\n"; 
        $opened = TRUE; 
       } 
       else{ 
        $url = $this->config->slash_item('index_url') . $menu->url; 
        print "  <li><a href=\"$url\" title=\"$menu->title\">$menu->title</a></li>" . "\n"; 
       } 
      } 
      if ($opened == TRUE) 
      { 
       print ' </ul>' . "\n"; 
       print '</div>' . "\n"; 
      } 
      ?> 

     </div><!-- end AccordionContainer --> 

     <!-- top tabs (marked as "center" to take up the main part of the BorderContainer) --> 
     <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center', tabStrip:true" id="topTabs"> 

      <div id="basicFormTab" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Basic Form Widgets', style:'padding:10px;display:none;'"> 

      </div> 
     </div><!-- end of region="center" TabContainer --> 
    </div> 

Answer 1

：

dojo.addOnLoad(function() { 
    var opened = {}; 
    dojo.forEach(dojo.query("#leftAccordion a"), function(aTag) { 
     dojo.connect(aTag, 'onclick', null, function(e) { 
      dojo.stopEvent(e); 
      var tabs = dijit.byId("topTabs"); 
      var pane = opened[aTag.href]; 
      if (!pane) 
      { 
       pane = new dijit.layout.ContentPane({ 
        title: aTag.title, 
        closable: true, 
        href: aTag.href, 
        onClose: function() { 
         opened[aTag.href] = null; 
         return true; 
        } 
       }); 
       opened[aTag.href] = pane; 
       tabs.addChild(pane); 
      } 
      tabs.selectChild(pane); 
     }); 
    }); 
}); 

ここ

HTMLは、（道場の機能が含まれています）テストを簡単に実行したり、これに続く答えを確認したりしますが、あなたが書いたものからあなたの問題は動的に生成しているペインの内容で実行されていないDojoパーサーの1つであると確信しています。あなたが提供したコードからはわかりませんが、ページが最初にロードされたときにDojoパーサが一度だけ実行されるのはかなり一般的な設定です。この動作を変更するための作業を行っていない場合はおそらく問題です。

そのコンテンツ・ペインのデータのロードが完了した後、基本的に、あなたのような何かをしたいとしている：（そのコンテンツ・ペインデータの根のidがmainであると仮定し

parser.parse(dom.byId("main")); 

を、それは上記の例であり、あなたはすでにparserとdomを必要に応じてきたような。）

することで、関心領域を確認するためにパーサのAPIノートをスクロールダウンする必要があります（Dojo Parser documentationをご覧ください）この操作を行う方法の例を見るイオン。 Dojo ContentPane documentationをさらに見ると、コンテンツペインのダウンロードが完了したときのコールバックを解除する方法を確認できます。

これが役に立ちます。