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设置为＆＃39; grid＆＃39;
添加＆＃34;点击我＆＃34;跨度（或者我没有什么可关注的）
从＆＃39; onFocus更改活动名称＆＃39;关注＆＃39;

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

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

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

1 个答案: