dgrid 的演示未显示在 Dojo/Dijit/ContentPane

Question

我正在尝试根据本页的第一个演示显示一个简单的 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>

Answer 1

我可以通过以下方式让它工作：

将 div 的 ID 设置为 'grid'
添加一个 "Click me" 跨度（或者我没有什么可关注的）
将事件名称从 'onFocus' 更改为 'focus'

然后，当您单击 'Click me' 文本（激活焦点）时会出现网格。

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

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

dgrid 的演示未显示在 Dojo/Dijit/ContentPane

Demo of dgrid not displaying in a Dojo/Dijit/ContentPane

dojo

dijit.layout

dgrid