Question

我一直在尝试在TabContainer中的ContentPane（以编程方式创建）中放置一个网格，但到目前为止我还没有成功。正如您所看到的，我尝试使用ContentPane的内容属性设置网格，但它没有用。这是我的代码，谢谢。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body class = "claro">
    <link rel="stylesheet"
    href="http://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/claro/claro.css" />
    <!-- load Dojo -->
    <script>
        dojoConfig = {
            parseOnLoad : true
        }
    </script>
    <script src="/xampp/dojo/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, locale:'en'"></script>

    <div style="width: 350px; height: 290px">
        <div id="tc1-prog"></div>
    </div>

    <script>
        require(["dojo/_base/declare", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dgrid/OnDemandGrid", "dgrid/extensions/DijitRegistry", "dojo/domReady!"], function(declare, TabContainer, ContentPane, Grid, DijitRegistry) {

            var tc = new TabContainer({
                style : "height: 100%; width: 100%;"
            }, "tc1-prog");

            var cp1 = new ContentPane({
                title : "Food",
                content : "We offer amazing food"
            });
            tc.addChild(cp1);

            var cp2 = new ContentPane({
                title : "Drinks",
                content : "We are known for our drinks."
            });
            tc.addChild(cp2);

            var data = [{
                first : 'Bob',
                last : 'Barker',
                age : 89
            }, {
                first : 'Vanna',
                last : 'White',
                age : 55
            }, {
                first : 'Pat',
                last : 'Sajak',
                age : 65
            }];

            var grid = new Grid({
                columns : {
                    first : 'First Name',
                    last : 'Last Name',
                    age : 'Age'
                }
            }, 'grid');
            grid.renderArray(data);
            grid.startup();


            var cp3 = new ContentPane({
                title : "Grid",
                content : grid
            });
            tc.addChild(cp3);

            tc.startup();
        });
    </script>

</body>

Answer 1

我刚刚在这里嵌入了解决方案，没有问题：

但您应该使用dojo/store/Memory创建数据存储，然后使用grid.set("store",yourDatastore);而不是dgrid.renderArray(store)在dgrid上呈现数据，因此使用内存，您将能够进行过滤，在商店中使用查询和搜索，并自动渲染导致dgrid。

require({
    packages: [
        {
            name: 'dgrid',
            location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
        },
        {
            name: 'xstyle',
            location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
        },
        {
            name: 'put-selector',
            location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
        }
    ]
}, ["dojo/_base/declare", 
    "dijit/layout/TabContainer", 
    "dijit/layout/ContentPane", 
    "dgrid/OnDemandGrid", 
    "dgrid/extensions/DijitRegistry",
    'dojo/store/Memory',
    "dojo/domReady!"], function(declare, TabContainer, ContentPane, Grid, DijitRegistry,Memory) {

            var tc = new TabContainer({
                style : "height: 100%; width: 100%;"
            }, "tc1-prog");

            var cp1 = new ContentPane({
                title : "Food",
                content : "We offer amazing food"
            });
            tc.addChild(cp1);

            var cp2 = new ContentPane({
                title : "Drinks",
                content : "We are known for our drinks."
            });
            tc.addChild(cp2);

            var data = [{
                first : 'Bob',
                last : 'Barker',
                age : 89
            }, {
                first : 'Vanna',
                last : 'White',
                age : 55
            }, {
                first : 'Pat',
                last : 'Sajak',
                age : 65
            }];

            var grid = new Grid({
                columns : {
                    first : 'First Name',
                    last : 'Last Name',
                    age : 'Age'
                }
            }, 'grid');
            
            // create memory store
            store = new Memory({data: data});

            // fill dgrid with datastore     
            grid.set("store",store);
            grid.startup();


            var cp3 = new ContentPane({
                title : "Grid",
                content : grid
            });
            tc.addChild(cp3);

            tc.startup();
        });

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div class="claro">
  <div style="width: 350px; height: 290px">
   <div id="tc1-prog"></div>
  </div>
</div>

如果你想要

Fiddle

Answer 2

dgrid不是dojo api的一部分。您需要添加对dgrid脚本的引用才能创建dgrid Grid。

将dgrid放在TabContainer

2 个答案: