TabContainer内の強化されたグリッドが機能しない

Question

私はしばらくこの壁に頭を打ちました。 私は大量のGoogle検索を行いました。私は正しく設定したと思いますが、うまくいきません。

私は上にenhancedGridを、下にtabContainerを持っています。 アイデアは、上部のアイテムをクリックし、下部のタブに関連するさまざまなデータを表示することです。

上部グリッドが正しく表示されます（スペースを節約するためにすべてのプラグインを削除しました）。 contentPanesに通常のテキストがある場合、下部の2つのタブは正しく表示されますが、最初のタブにグリッドを埋め込むと、他のタブは表示されません。

ありがとうございました！ クリス

ここでは私のソースコードです：

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<div xmlns:jsp="http://java.sun.com/JSP/Page" 
xmlns:c="http://java.sun.com/jsp/jstl/core" 
xmlns:spring="http://www.springframework.org/tags" 
xmlns:util="urn:jsptagdir:/WEB-INF/tags/util" 
version="2.0" style="margin-bottom:3px"> 
<jsp:output omit-xml-declaration="yes"/> 

<style type="text/css"> 
    <spring:message code="dojo_version" var="dj" /> 

    @import "<spring:url value="/resources/${dj}/dijit/themes/claro/claro.css" />"; 
    @import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />"; 
    @import "<spring:url value="/resources/${dj}/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" />"; 

    #accountDiv {height:15em; width:100%;} 
    #contactDiv {height:100%; width:100%;} 
</style> 

<script type="text/javascript"> 
    dojo.require("dojo.data.ItemFileReadStore"); 
    dojo.require("dojox.grid.EnhancedGrid"); 
    dojo.require("dojox.grid.enhanced.plugins.Filter"); 
    dojo.require("dojox.grid.enhanced.plugins.Pagination"); 
    dojo.require("dijit.form.Button"); 
    dojo.require("dijit.layout.TabContainer"); 
    dojo.require("dojox.layout.ContentPane"); 

    dojo.ready(function() { 
     accountSetup(); 
     contactSetup(); 
    }); 

    function accountSetup() { 
     var layout = [[ 
     { field: 'name', name: 'Name', width: '15%' }, 
     { field: 'description', name: 'Description', width: '14%' }, 
     { field: 'website', name: 'Website', width: '15%' }, 
     { field: 'numberEmployees', name: '# Emp', width: '5%' }, 
     { field: 'taxId', name: 'Tax ID #', width: '8%' }, 
     { field: 'taxExempt', name: 'Tax Exempt?', width: '8%' }, 
     { field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' } 
     ]]; 

     var accountGrid = new dojox.grid.EnhancedGrid({ 
      id: 'accountGrid', 
      selectionMode: "single", 
      structure: layout, 
      noDataMessage: "No accounts found" 
     }, document.createElement('div')); 

     dojo.xhrGet({ 
      url: "${pageContext.request.contextPath}/accounts/allShallow", 
      headers: {"Accept": "application/json"}, 
      handleAs: "json", 
      load: function(data) { 
       accountGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}})); 
      }, 
      error: function(error) { 
       console.log("loading of grid data failed. Exception...", error); 
      } 
     }); 

     dojo.byId("accountDiv").appendChild(accountGrid.domNode); 
     accountGrid.startup(); 
    }; 

    function contactSetup() { 
     var layout = [[ 
     { field: 'name', name: 'Name', width: '15%' }, 
     { field: 'description', name: 'Description', width: '14%' }, 
     { field: 'website', name: 'Website', width: '15%' }, 
     { field: 'numberEmployees', name: '# Emp', width: '5%' }, 
     { field: 'taxId', name: 'Tax ID #', width: '8%' }, 
     { field: 'taxExempt', name: 'Tax Exempt?', width: '8%' }, 
     { field: 'ourAccountNumber', name: 'Our Acct #', width: '8%' } 
     ]]; 

     var contactGrid = new dojox.grid.EnhancedGrid({ 
      id: 'contactGrid', 
      selectionMode: "single", 
      structure: layout, 
      noDataMessage: "No accounts found" 
     }, document.createElement('div')); 

     dojo.xhrGet({ 
      url: "${pageContext.request.contextPath}/accounts/allShallow", 
      headers: {"Accept": "application/json"}, 
      handleAs: "json", 
      load: function(data) { 
       contactGrid.setStore(new dojo.data.ItemFileReadStore({data: {items : data}})); 
      }, 
      error: function(error) { 
       console.log("loading of grid data failed. Exception...", error); 
      } 
     }); 

     dojo.byId("contactDiv").appendChild(contactGrid.domNode); 
     contactGrid.startup(); 
    }; 
    </script> 

    <div> 
     <util:panel title="Accounts" id="accountPanel"> 
      <div id="accountDiv" /> 
     </util:panel> 
    </div> 

    <div style="height:346px; width:100%"> 
     <div data-dojo-type="dijit.layout.TabContainer" style="height: 100%"> 

      <div data-dojo-type="dojox.layout.ContentPane" title="Contacts" selected="true"> 
       <div id="contactDiv" /> 
      </div> 

      <div data-dojo-type="dojox.layout.ContentPane" title="Projects"> 
       123 
      </div> 

      </div> 
    </div> 
</div> 

Answer 1

方法を使用しようとしたことがありますか？

例：

var contactGrid = new dojox.grid.EnhancedGrid({ 
     id: 'contactGrid', 
     selectionMode: "single", 
     structure: layout, 
     noDataMessage: "No accounts found" 
}, "contactDiv"); 

Answer 2

あなたが直接、代わりに新しいものを作成するの所望の<div>をターゲットについてplaceAtの代わりには、appendChild

yourGrid.placeAt(dijit.byId("yourContainerId").containerNode, 'last'); 
yourGrid.startup(); 

Answer 3

あなたは、グリッドに

<style type="text/css"> 
     #accountDiv dojoxGridMasterHeader {height:15em; width:100%;} 
     #contactDiv dojoxGridMasterHeader {height:100%; width:100%;} 
</style> 

をcssクラスを追加して、今、あなたはグリッドがここ

dojo.addClass('accountDiv ', 'accountDiv dojoxGridMasterHeader'); 

を表示するためにあなたのタブを表示したいときは、次をインポートすることができますdojoxGridMasterHeader私のヘッダーが表示されたかったので、exapleのために、あなたは開発者のツールや火かび棒を使って、正確なタブCSSを取得して表示することができます。