将 dgrid 放在 TabContainer 内的 ContentPane 内

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

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

Answer 2

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

但您应该使用 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如果你想要

将 dgrid 放在 TabContainer 内的 ContentPane 内

Putting dgrid inside a ContentPane inside a TabContainer

dojo

dgrid