Question

我已经在这个人的头上撞墙了一段时间。我已经完成了大量的谷歌搜索，我认为我已经正确设置了它，但它无法正常工作。

我在顶部有一个enhancedGrid，在底部有一个tabContainer。我们的想法是点击顶部的项目，并在底部标签上显示不同的相关数据。

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

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

这是我的源代码：

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

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

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

Answer 2

如何直接定位所需的<div>而不是创建新的var contactGrid = new dojox.grid.EnhancedGrid({ id: 'contactGrid', selectionMode: "single", structure: layout, noDataMessage: "No accounts found" }, "contactDiv");？

EG。

{{1}}

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用于exaple，因为我希望我的标题显示，你可以使用开发人员工具或firebug获取确切的标签css并显示它。

TabContainer中的EnhancedGrid无法正常工作

3 个答案: