Question

感谢此前的一些帮助，我让Dojo dgrid工作;甚至想出如何将它与我的休息服务中的数据联系起来。

现在我添加了一个输入框，一个按钮，所有逻辑都发生在按钮单击上。但是第二次单击按钮，即使输入字段中的输入值相同，也会出现错误。

错误：

TypeError：无法在StoreMixin.js中读取未定义的属性'element'：33

包括图片，以便您可以看到我的console.logs

我读了这个How To reset the OnDemandGrid，但有必要检查网格是否存在并做不同的逻辑？我不能每次都“新建”一个新的吗？

代码：

<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'>
    <label for="lastnameStartsWith">Lastname Starts With:</label>
    <input id="lastnameStartsWith" type="text" name="lastnameStartsWith" value="Wag" 
           data-dojo-type="dijit/form/TextBox"
           data-dojo-props="trim:true, propercase:true" />
    <br />
    <br />  
        <button id="queryStudentsButton" data-dojo-type="dijit/form/Button"
        data-dojo-type="dijit/form/Button" 
        data-dojo-props="iconClass:'dijitIconTask'">
            <span>Query</span>
            <script type='dojo/on' data-dojo-event='click'>
    require([
        'dstore/RequestMemory',
        'dstore/Memory',
        'dgrid/OnDemandGrid'
    ], function (RequestMemory, Memory, OnDemandGrid) {
                    var url = '../students/' + dojo.byId('lastnameStartsWith').value; 
                    console.log("query students for dataGrid latsnameStartsWith:" + dojo.byId('lastnameStartsWith').value);             

                    require(['dojo/request'], function(request){
                        request.get(url,
                             {headers: {"Content-Type": 'application/json',
                                        "username": securityConfig.username,
                                        "password": securityConfig.password}}
                               )
                            .then(function(response){
                                //console.log("string response=" + response); 
                                var respJSON = JSON.parse(response);
                                var respDataForDGrid = respJSON.recordset;
                                console.log("got respJSON back, num rows= " + respDataForDGrid.length);     


                                //================================================          
                                // Create an instance of OnDemandGrid referencing the store
                                console.log("Debug1");             

                                var grid2 = new OnDemandGrid({
                                    collection: new Memory({ data: respDataForDGrid }),
                                    columns: {
                                        student_id: 'ID',
                                        student_firstname: 'First Name',
                                        student_lastname: 'Last Name',
                                        student_city: 'City',
                                        student_state: 'State',
                                        student_zip: 'Zip'
                                    }
                                }, 'grid2');                                    

                                console.log("Debug2");             

                                grid2.startup();
                                console.log("Debug3");             

                             },
                             function(error){
                                console.log("Error=" + error); 
                                //dom.byId('studentFeedback').value += response;
                             }); 
                    });
    });
            </script> 
        </button>
<h2>My demoGrid - From JSON RestService (Database)</h2>
<div id='grid2'></div>

</div>

第2部分 -

我尝试在此页面上混合使用您的代码和代码： How To reset the OnDemandGrid

  if (grid2Registered){
    console.log("reuse existing grid"); 
    grid2Registered.set('collection', memStore);
    // refresh: clear the grid and re-queries the store for data. 
    grid2Registered.refresh();  
    }
    else{...

此处的文档（https://github.com/SitePen/dgrid/blob/v0.4.3/doc/components/core-components/OnDemandList-and-OnDemandGrid.md）说：

清除网格并重新查询商店以获取数据。如果对于实例或选项，keepScrollPosition为true 传递给刷新，将尝试保持当前滚动位置。 OnDemandList从refresh返回一个promise 当视图中的项目完成渲染时解析。承诺解决了使用已呈现的QueryResults。

Answer 1

这个很难！下面是一个工作示例。

首先，我将onClick函数从声明转换为编程：声明脚本由dojo解析，因此您无法在调试器下检查它们（设置断点等）（至少我不会这样做）知道该怎么做）。因此，在我看来，避免它们是一种好习惯。

然后，确实是错误是由于重新实例化具有相同id的dgrid，因此您需要一种方法来检测dgrid已经存在。但有一个技巧：dgrit系统可以正确处理dgrids，它们需要与dijitRegistry扩展混合使用。有关详细信息，请参阅here。

然后你可以使用registry.byId（＆＃39; grid2＆＃39;）来检测dgrid是否已经存在。

此外，我不得不跳过respDataForDgrid部分并直接使用respJSON（可能是由于与服务器端的区别（？） - 我在服务器端使用了一个带有json数组的简单文本文件）。

    <!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 data-dojo-type="dijit/layout/ContentPane"
        data-dojo-props='title:"CustomersGrid"'>
        <label for="lastnameStartsWith">Lastname Starts With:</label> <input
            id="lastnameStartsWith" type="text" name="lastnameStartsWith"
            value="Wag" data-dojo-type="dijit/form/TextBox"
            data-dojo-props="trim:true, propercase:true" /> <br /> <br />
        <button id="queryStudentsButton" data-dojo-type="dijit/form/Button"
            data-dojo-props="iconClass:'dijitIconTask', onClick: myClick">Query</button>
        <h2>My demoGrid - From JSON RestService (Database)</h2>
        <div id='grid2'></div>

    </div>
    <script src="dojo-release-1.12.2-src/dojo/dojo.js"
        data-dojo-config="async:true"></script>
    <script type="text/javascript">
            require(["dojo", "dojo/parser", "dojo/domReady!"],
            function(dojo, parser){
                parser.parse();
            });
        function myClick(){
        var url = 'students/' + dojo.byId('lastnameStartsWith').value, securityConfig = {username: 'john', password: 'Doe'}; 
                    console.log("query students for dataGrid latsnameStartsWith:" + dojo.byId('lastnameStartsWith').value);             

                    require(['dojo/_base/declare', 'dojo/request', "dijit/registry", "dstore/RequestMemory", "dstore/Memory", "dgrid/OnDemandGrid", "dgrid/extensions/DijitRegistry"], function(declare, request, registry, RequestMemory, Memory, OnDemandGrid, DijitRegistry){
                        request.get(url,{})
                            .then(function(response){
                                console.log("string response=" + response); 
                                var respJSON = JSON.parse(response);
                                //var respDataForDGrid = respJSON.recordset;
                                //console.log("got respJSON back, num rows= " + respDataForDGrid.length);     


                                //================================================          
                                // Create an instance of OnDemandGrid referencing the store
                                console.log("Debug1");             
                                var theGrid = registry.byId('grid2');
                                if (theGrid){
                                    theGrid.set('collection', new Memory({data: respJSON}));
                                }else{
                                    var grid2 = new (declare([OnDemandGrid, DijitRegistry]))({
                                        collection: new Memory({ data: respJSON }),
                                        columns: {
                                            student_id: 'ID',
                                            student_firstname: 'First Name',
                                            student_lastname: 'Last Name',
                                            student_city: 'City',
                                            student_state: 'State',
                                            student_zip: 'Zip'
                                        }
                                    }, 'grid2');                                    

                                    console.log("Debug2");             

                                    grid2.startup();
                                    console.log("Debug3"); 
                                }            

                             },
                             function(error){
                                console.log("Error=" + error); 
                                //dom.byId('studentFeedback').value += response;
                             }); 
                    });
        };
            </script>
</body>
</html>

dgrid（onDemandGrid）在第一次单击按钮时加载，但单击第二次按钮时出现错误

1 个答案: