dgrid 演示未显示在 Dojo/Dijit/ContentPane 中答案

【问题标题】：Demo of dgrid not displaying in a Dojo/Dijit/ContentPanedgrid 演示未显示在 Dojo/Dijit/ContentPane 中
【发布时间】：2017-08-04 16:41:08
【问题描述】：

我正在尝试按照此页面上的第一个演示显示一个简单的 dgrid： http://dgrid.io/tutorials/1.0/grids_and_stores/

唯一的窍门是我试图将它放在现有的容器结构中。所以我尝试了容器的onFocus事件，但是当我点击那个容器时，网格没有显示，并且没有出现console.log消息。

<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'>
<script type='dojo/on' data-dojo-event='onFocus'>
    require([
        'dstore/RequestMemory',
        'dgrid/OnDemandGrid'
    ], function (RequestMemory, OnDemandGrid) {
        // Create an instance of OnDemandGrid referencing the store
        var dom = require('dojo/dom');  
        console.log("onFocus event for CustomersGrid ContentPane");             
        dom.byId('studentLastname').value  = 'test onFocus event';
        var grid = new OnDemandGrid({
            collection: new RequestMemory({ target: 'hof-batting.json' }),
            columns: {
                first: 'First Name',
                last: 'Last Name',
                totalG: 'Games Played'
            }
        }, 'grid');

        grid.startup();
    });
</script>
</div>

【问题讨论】：

您是否遇到任何错误？
未发现错误。
您是否正确获取数据？另外，你检查过 DOM 结构吗？网格节点是不是放在那里？

标签： dojo dgrid dijit.layout

【解决方案1】：

我可以通过以下方式使其工作：

将 div 的 id 设置为 'grid'
添加“点击我”跨度（或者我没有什么可关注的）
将事件名称从“onFocus”更改为“focus”

然后，当您单击“单击我”文本（以激活焦点）时，会出现网格。

在相应的完整源页面下方（针对我的环境）：

<!DOCTYPE HTML><html lang="en">
<head>
    <meta charset="utf-8">
    <title>Neal Walters stask overflow test</title>
    <link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
    <link rel="stylesheet" href="dojo-release-1.12.2-src/dgrid/css/dgrid.css" media="screen">

</head>
<body class="claro">
    <div id='grid' data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'>
    <span>click me!</span>
    <script type='dojo/on' data-dojo-event='focus'>
        require([
            'dstore/RequestMemory',
            'dgrid/OnDemandGrid'
        ], function (RequestMemory, OnDemandGrid) {
            // Create an instance of OnDemandGrid referencing the store
            var dom = require('dojo/dom');  
            console.log("onFocus event for CustomersGrid ContentPane");             
            //dom.byId('studentLastname').value  = 'test onFocus event';
            var grid = new OnDemandGrid({
                collection: new RequestMemory({ target: 'hof-batting.json' }),
                columns: {
                    first: 'First Name',
                    last: 'Last Name',
                    totalG: 'Games Played'
                }
            }, 'grid');

            grid.startup();
        });
    </script>
    </div>
    <script src="dojo-release-1.12.2-src/dojo/dojo.js"  data-dojo-config="async:true"></script>
    <script type="text/javascript">
        require(["dojo/parser", "dojo/domReady!"],
        function(parser){
            parser.parse();
        });
    </script>
 </body>

以上使用声明式语法。或者，您可以考虑编程，如下面的源代码中网格在加载页面时出现的位置。此外，虽然脚本内断点上方的声明性语法被忽略（使用 firefox），但它按预期使用编程语法被激活：

<!DOCTYPE HTML><html lang="en">
<head>
    <meta charset="utf-8">
    <title>Neal Walters stask overflow test</title>
    <link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
    <link rel="stylesheet" href="dojo-release-1.12.2-src/dgrid/css/dgrid.css" media="screen">

</head>
<body class="claro">
    <div id='grid' data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'></div>
    <script src="dojo-release-1.12.2-src/dojo/dojo.js"  data-dojo-config="async:true"></script>
    <script>
        require([
            'dstore/RequestMemory',
            'dgrid/OnDemandGrid'
        ], function (RequestMemory, OnDemandGrid) {
            // Create an instance of OnDemandGrid referencing the store
            var dom = require('dojo/dom');  
            console.log("onFocus event for CustomersGrid ContentPane");             
            //dom.byId('studentLastname').value  = 'test onFocus event';
            var grid = new OnDemandGrid({
                collection: new RequestMemory({ target: 'hof-batting.json' }),
                columns: {
                    first: 'First Name',
                    last: 'Last Name',
                    totalG: 'Games Played'
                }
            }, 'grid');

            grid.startup();
        });
    </script>
</body>

【讨论】：

你太棒了！谢谢！那么这些技巧是否需要让它在容器中工作？还是我复制的代码中有错误？我想我也应该在非容器中尝试过。我将不得不查找 onFocus 与 Focus。
onLoad/load 类型的事件会在容器打开时使表单自动填充吗？
您的示例还让我看到我缺少数据网格的 css：
感谢您的赞美 :-)。实际上，这些是您代码中的错误，与容器无关。不确定您对自动填充表单的含义。如果您提供足够的目标（在您的情况下为 hof-battting.json），则网格数据将与网格一起显示：声明式版本的焦点，程序化版本的加载页面（如教程中所示）。