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

多亏了之前的一些帮助，我让Dojo dgrid开始工作；甚至想出了如何将它与我的rest服务中的数据联系起来

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

错误：

TypeError:无法读取StoreMixin.js:33中未定义的属性“element”

包括图片，以便您可以查看my console.log

我读过这篇文章，但是否有必要检查网格是否存在并执行不同的逻辑？我不能每次都“新”一个新的吗

代码：

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

这里的文件（）说：

清除网格并重新查询存储中的数据。如果 keepScrollPosition在实例或选项上均为true 传递给refresh时，将尝试保留当前 滚动位置。OnDemandList从refresh返回一个承诺，其中 在视图中的项目完成渲染时解析。诺言解决了 使用呈现的查询结果

---

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

首先，我将onClick函数从声明性转换为编程性：声明性脚本由dojo解析，因此您无法在调试器下检查它们（设置断点等）（至少我不知道如何做）。因此，在我看来，避免它们似乎是一种很好的做法

然后，实际上，该错误是由于使用相同的id重新实例化dgrid造成的，因此您确实需要一种方法来检测dgrid是否已经存在。但是有一个技巧：为了让dgrid被dijit系统正确处理，它们需要与dijit注册表扩展混合在一起。有关详细信息，请参阅

然后，您可以使用registry.byId（'grid2'）来检测dgrid是否已经存在

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

Neal-Walters-stask溢流试验
Lastname以开头：


查询
My demoGrid-来自JSON RestService（数据库）
require（[“dojo”、“dojo/parser”、“dojo/domReady！”），
函数（dojo、解析器）{
parser.parse（）；
});
函数myClick（）{
var url='students/'+dojo.byId（'lastnameStartsWith'）.value，securityConfig={username:'john'，password:'Doe'}；
log（“查询学生数据网格latsnameStartsWith:+dojo.byId（'lastnameStartsWith'）.value”）；
require（['dojo/_base/declare'，'dojo/request'，“dijit/registry”，“dstore/RequestMemory”，“dstore/Memory”，“dgrid/OnDemandGrid”，“dgrid/extensions/DijitRegistry”]，函数（declare，request，registry，RequestMemory，OnDemandGrid，DijitRegistry）{
获取（url，{}）
.然后（功能（响应）{
console.log（“字符串响应=”+响应）；
var respJSON=JSON.parse（响应）；
//var respDataForDGrid=respJSON.recordset；
//log（“返回respJSON，num rows=“+respDataForDGrid.length”）；
//================================================          
//创建引用存储的OnDemandGrid实例
console.log（“Debug1”）；
var theGrid=registry.byId（'grid2'）；
如果（网格）{
set（'collection'，新内存（{data:respJSON}））；
}否则{
var grid2=new（声明（[OnDemandGrid，DijitRegistry]））({
集合：新内存（{data:respJSON}），
栏目：{
学生id:“id”，
学生名字：“名字”，
学生姓：“姓”，
学生城市：“城市”，
学生州：“州”，
学生：“zip”
}
}"grid2",；
console.log（“Debug2”）；
grid2.startup（）；
console.log（“Debug3”）；
}            
},
函数（错误）{
console.log（“Error=“+Error”）；
//dom.byId（'studentFeedback'）。value+=响应；
}); 
});
};

如果已经创建了网格，建议（至少我是这样做的）使用新存储刷新网格，前提是结构/列保持不变。这样，您就避免了每次有查询时创建网格的开销。那么您将如何实现这一点呢？有柜台吗？或者检查如何检查我的grid2之前是否已定义？如果采用模板方法，即在html中定义小部件，则可以使用数据dojo附着点来引用网格。如果采用编程方法，则可以将id（请注意，对于您使用的每个dijit，id必须是唯一的）分配给网格，并将其称为dijit.byId（“yourId”）。谢谢，我将继续尝试使用编程代码；我有一些不同的样品

  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{...    

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