spring - EnhancedGrid en un TabContainer no funciona

dojo

Question

He estado golpeando mi cabeza contra la pared en este por un tiempo. He hecho un montón de búsquedas en Google y creo que lo he configurado correctamente, pero no funciona.

Tengo un enhancedGrid en la parte superior y un tabContainer en la parte inferior. La idea es hacer clic en un elemento en la parte superior y mostrar diferentes datos relacionados en las pestañas inferiores.

La cuadrícula superior se muestra correctamente (eliminé todos los complementos para ahorrar espacio). Las dos pestañas en la parte inferior se muestran correctamente si tengo texto regular en los contentPanes, pero cuando inserto una grilla en la primera pestaña, las otras pestañas no se muestran.

¡Gracias de antemano por su ayuda! Chris

Aquí está mi código fuente:

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

¿Has intentado usar placeAt en lugar de appendChild?

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

Answer 2

¿Qué hay de dirigir directamente la <div> deseada en lugar de crear una nueva?

P.ej.

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

Answer 3

Puedes simplemente agregar la clase css a la grilla,

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

y ahora importe lo siguiente cuando desee que la cuadrícula muestre las pestañas que se mostrarán

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

aquí dojoxGridMasterHeader es para exaple ya que quería mostrar mi encabezado, puede usar la herramienta de desarrolladores o firebug para obtener las pestañas exactas css y mostrarlas.