TabContainer 中的 EnhancedGrid 不起作用

Posted 2023-02-16

【中文标题】TabContainer 中的 EnhancedGrid 不起作用

【英文标题】：EnhancedGrid in a TabContainer not working

【发布时间】：2012-03-17 03:15:36

【问题描述】：

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

我在顶部有一个增强网格，在底部有一个 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>

【参考方案1】：

如何直接定位所需的<div> 而不是创建一个新的？

例如。

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

【讨论】：

成功了。现在看来，enhancedGrid 并没有继续下去——我正在解决 Gridx 的新问题。谢谢。

【参考方案2】：

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

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

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