将 dgrid 放在 TabContainer 内的 ContentPane 中答案

【问题标题】：Putting dgrid inside a ContentPane inside a TabContainer将 dgrid 放在 TabContainer 内的 ContentPane 中
【发布时间】：2016-08-15 16:43:31
【问题描述】：

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

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

【问题讨论】：

标签： dojo dgrid

【解决方案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 如果你愿意的话

【讨论】：

@Naci 我已经添加了一些推荐（内存商店），请查看我的回答，如果它有助于将其标记为已解决，谢谢

【解决方案2】：

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

【讨论】：

我已经把dgrid放到dojo文件夹里面了，引用没有错误
dgrid 的配置怎么样，你也添加了。复制到文件夹/网络项目是不够的。
谢谢@bRIMOsBor！我不知道为什么我在控制台中没有看到任何错误，但是您的代码非常好