1

私はしばらくの間、この壁に頭をぶつけてきました。私はたくさんのグーグル検索をしましたが、正しく設定したと思いますが、うまくいきません。

上に EnhancedGrid があり、下に tabContainer があります。アイデアは、上部の項目をクリックして、下部のタブにさまざまな関連データを表示することです。

上部のグリッドは正しく表示されます (スペースを節約するためにすべてのプラグインを削除しました)。contentPanes に通常のテキストがある場合、下部の 2 つのタブは正しく表示されますが、最初のタブにグリッドを埋め込むと、他のタブは表示されません。

よろしくお願いします。クリス

ここに私のソースコードがあります:

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

3 に答える 3

0

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 を取得して表示できます。

于 2014-06-20T06:52:21.480 に答える
0

<div>新しいものを作成するのではなく 、目的のものを直接ターゲットにするのはどうですか?

例えば。 

var contactGrid = new dojox.grid.EnhancedGrid({  
        id: 'contactGrid',  
        selectionMode: "single",  
        structure: layout,  
        noDataMessage: "No accounts found"  
}, "contactDiv");
于 2012-11-28T12:01:24.253 に答える
0

appendChild の代わりに placeAt を使用しようとしましたか

yourGrid.placeAt(dijit.byId("yourContainerId").containerNode, 'last');
yourGrid.startup();
于 2012-06-13T23:37:22.073 に答える