dgrid未显示在Dojo/Dijit/ContentPane中的演示_Dojo_Dgrid_Dijit.layout

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

dojo

dgrid未显示在Dojo/Dijit/ContentPane中的演示,dojo,dgrid,dijit.layout,Dojo,Dgrid,Dijit.layout,我正试图按照本页上的第一个演示显示一个简单的dgrid：唯一的诀窍是我试图把它放在一个现有的容器结构中。因此，我尝试了容器的onFocus事件，但是当我单击该容器时，网格没有显示，并且没有显示console.log消息 <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'> <script type='dojo/on' data-dojo-event='o

我正试图按照本页上的第一个演示显示一个简单的dgrid：

唯一的诀窍是我试图把它放在一个现有的容器结构中。因此，我尝试了容器的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>


要求([
“数据存储/请求内存”，
“dgrid/OnDemandGrid”
]，函数（请求内存，OnDemandGrid）{
//创建引用存储的OnDemandGrid实例
var dom=require（'dojo/dom'）；
log（“CustomerGrid ContentPane的onFocus事件”）；
dom.byId（'studentLastname'）。value='testonfocus事件'；
var grid=新的OnDemandGrid({
集合：新的RequestMemory（{target:'hof batting.json'}），
栏目：{
第一个：'名字'，
last:'姓'，
totalG：“玩的游戏”
}
}“网格”）；
grid.startup（）；
});

我可以通过以下方式实现：

将div的id设置为“grid”
添加一个“点击我”的范围（或者我没有什么要关注的）
将事件名称从“onFocus”更改为“focus”

然后，当您单击“单击我”文本（以激活焦点）时，网格显示

在相应的完整源代码页下方（适用于我的环境）：


Neal-Walters-stask溢流试验
点击我！
要求([
“数据存储/请求内存”，
“dgrid/OnDemandGrid”
]，函数（请求内存，OnDemandGrid）{
//创建引用存储的OnDemandGrid实例
var dom=require（'dojo/dom'）；
log（“CustomerGrid ContentPane的onFocus事件”）；
//dom.byId（'studentLastname'）。value='testonfocus事件'；
var grid=新的OnDemandGrid({
集合：新的RequestMemory（{target:'hof batting.json'}），
栏目：{
第一个：'名字'，
last:'姓'，
totalG：“玩的游戏”
}
}“网格”）；
grid.startup（）；
});
require（[“dojo/parser”，“dojo/domReady！”），
函数（解析器）{
parser.parse（）；
});

上面使用的是声明性语法。或者，您可以考虑进行编程，就像在下面的源代码中，网格在加载页面时出现一样。此外，如果脚本中断点上方的声明性语法被忽略（使用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>


Neal-Walters-stask溢流试验
要求([
“数据存储/请求内存”，
“dgrid/OnDemandGrid”
]，函数（请求内存，OnDemandGrid）{
//创建引用存储的OnDemandGrid实例
var dom=require（'dojo/dom'）；
log（“CustomerGrid ContentPane的onFocus事件”）；
//dom.byId（'studentLastname'）。value='testonfocus事件'；
var grid=新的OnDemandGrid({
集合：新的RequestMemory（{target:'hof batting.json'}），
栏目：{
第一个：'名字'，
last:'姓'，
totalG：“玩的游戏”
}
}“网格”）；
grid.startup（）；
});

我可以通过以下方式实现：

将div的id设置为“grid”
添加一个“点击我”的范围（或者我没有什么要关注的）
将事件名称从“onFocus”更改为“focus”

然后，当您单击“单击我”文本（以激活焦点）时，网格显示

在相应的完整源代码页下方（适用于我的环境）：


Neal-Walters-stask溢流试验
点击我！
要求([
“数据存储/请求内存”，
“dgrid/OnDemandGrid”
]，函数（请求内存，OnDemandGrid）{
//创建引用存储的OnDemandGrid实例
var dom=require（'dojo/dom'）；
log（“CustomerGrid ContentPane的onFocus事件”）；
//dom.byId（'studentLastname'）。value='testonfocus事件'；
var grid=新的OnDemandGrid({
集合：新的RequestMemory（{target:'hof batting.json'}），
栏目：{
第一个：'名字'，
last:'姓'，
totalG：“玩的游戏”
}
}“网格”）；
grid.startup（）；
});
require（[“dojo/parser”，“dojo/domReady！”），
函数（解析器）{
parser.parse（）；
});

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


Neal-Walters-stask溢流试验
要求([
“数据存储/请求内存”，
“dgrid/OnDemandGrid”
]，函数（请求内存，OnDemandGrid）{
//创建引用存储的OnDemandGrid实例
var dom=require（'dojo/dom'）；
log（“CustomerGrid ContentPane的onFocus事件”）；
//dom.byId（'studentLastname'）。value='testonfocus事件'；
var grid=新的OnDemandGrid({
集合：新的RequestMemory（{target:'hof batting.json'}），