TabContainer 中的增强网格不起作用

Question

我已经把头撞在墙上了一段时间了。我已经做了大量的谷歌搜索，我认为我已经正确设置了它，但它不起作用。

我在顶部有一个增强的网格，在底部有一个选项卡容器。这个想法是单击顶部的项目并在底部选项卡上显示不同的相关数据。

顶部网格显示正确(我已经删除了所有插件以节省空间(。如果我在内容窗格中有常规文本，则底部的两个选项卡会正确显示，但是当我在第一个选项卡中嵌入网格时，其他选项卡不会显示。

提前感谢您的帮助！克里斯

这是我的源代码：

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

直接定位所需的<div>而不是创建一个新怎么样？

例如。

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

Answer 2

您是否尝试过使用 placeAt 而不是 appendChild

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

Answer 3

你可以将css类添加到网格中，

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

现在，当您希望网格显示要显示的选项卡时，导入以下内容

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

这里 dojoxGridMasterHeader 是用于示例，因为我希望我的标题是 showen，您可以使用开发人员工具或 firebug 来获取确切的选项卡 css 并显示它。