EnhancedGrid в TabContainer не работает - PullRequest
Новая
       39

EnhancedGrid в TabContainer не работает

1 голос
/ 17 марта 2012

Я уже некоторое время бью головой об стену.Я выполнил тонну поисков в Google и думаю, что настроил его правильно, но он не работает.

У меня расширенная сетка сверху и tabContainer снизу.Идея состоит в том, чтобы щелкнуть элемент сверху и показать различные связанные данные на нижних вкладках.

Верхняя сетка отображается правильно (я удалил все плагины, чтобы сэкономить место).Две вкладки внизу отображаются правильно, если у меня есть обычный текст в области содержимого, но когда я встраиваю сетку в первую вкладку, другие вкладки не отображаются.

Заранее спасибо за вашу помощь!Крис

Вот мой исходный код: 

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

Ответы [ 3 ]

0 голосов
/ 28 ноября 2012

Как насчет прямого нацеливания на желаемый <div> вместо создания нового?

Например.

var contactGrid = new dojox.grid.EnhancedGrid({  
        id: 'contactGrid',  
        selectionMode: "single",  
        structure: layout,  
        noDataMessage: "No accounts found"  
}, "contactDiv");
0 голосов
/ 20 июня 2014

Вы можете просто добавить класс 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 вкладки и отобразить его.

0 голосов
/ 14 июня 2012

Вы пытались использовать placeAt вместо appendChild 

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