隐藏tabcontainer中的DGrid只查询一次dstore

Question

我在一系列选项卡中创建了几个 DGrid OnDemandGrids，每个选项卡都包含一个带有网格的内容窗格。网格以提供范围 headers、id 属性等的 Rest 服务为目标。first/selected/visible 选项卡按预期完全填充了对 Rest 服务的多次调用。其他一些选项卡填写正常，但它们的人口稀少，因此只需要一次调用该服务。有问题的选项卡只显示前 25 个，因为它只查询服务一次（数据存储中有超过一千条记录）。

因此，如果问题选项卡是在创建网格之前选择的选项卡，则有问题的选项卡会调用其余服务两次以填充网格的可见部分。如果选项卡和网格是在选择之前创建的，则只有第一个查询发生（在选项卡打开之前）并且在网格中，其余的永远不会被查询。我只能猜测选项卡不是 selected/shown，网格可能不知道要查询多少来填充与选项卡匹配的网格大小。

下面包含测试代码，但使用内部休息服务。我在网格中混入了DijitRegistry。如果我遇到问题并单击其中一列以在问题网格中排序，所有内容都会正确填写。已尝试 grid.resize 并将网格直接放在 tabcontainer 上，但没有任何效果。

针对 Rest 服务的简单 OnDemandGrid 绑定到添加到 tabcontainer 的内容窗格的 href 中的 DOM id，但会导致很多问题...

建议？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test dGrid</title>
  <link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="dojo/dgrid/css/dgrid.css">
  <link rel="stylesheet" href="dojo/dgrid/css/skins/claro.css">
<style>
  .claro {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: .75em;
    color: #000;
  }

  body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
  }

  #Grid1 {
    width: 100%;
    height: 100%;
  }

</style>
<script src="dojo/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, locale:'en'"></script>
<script>
 require([
     "dojo/ready",
     "dijit/registry",
     "dojo/_base/declare",
     "dgrid/OnDemandGrid",
     "dgrid/extensions/DijitRegistry",
     "dstore/Memory",
     "dstore/Rest",
     "dijit/layout/TabContainer",
     "dijit/layout/ContentPane"
 ],
 function (ready, registry, declare, Grid, DijitRegistry, Memory,Rest) {
     ready(function () {
         var mystore = new (declare([Rest]))({
                    target : "Rest/HR/Employees",
                    idProperty: "employeeID",
            });

         var datacolumns = {
                    employeeID : 'ID',
                    fname: "First Name",
                    lname: "Last Name",
                    username : 'User Name',
                    employeeNbr: "Employee Number",
                    unitName: "Unit Name",
                    inserted: "Inserted",
                    updated: "Updated",
                    updatedBy: "Updated By",
                    counter : 'count'
                    };
         var CustomGrid = declare([Grid, DijitRegistry]); 
         this.Grid1 = new CustomGrid({
             collection: mystore,
             columns: datacolumns,
             idProperty: "id"
         }, "Grid1");
         this.Grid1.startup();
     });
 });
</script>
</head>
<body class="claro">
<div id="TabContainer" data-dojo-type="dijit/layout/TabContainer" style="width:100%; height:100%" data-dojo-props="tabStrip:true">
    <div id="Tab1" data-dojo-type="dijit/layout/ContentPane" title="Emtpy" data-dojo-props="selected:true">
        Nothing here, just to keep tab 2 hidden until clicked on
    </div>
    <div id="Tab2" data-dojo-type="dijit/layout/ContentPane" title="Grid">
        <div id="Grid1"></div>
    </div>
    <div id="Tab3" data-dojo-type="dijit/layout/ContentPane" title="Empty">
        Nothing
    </div>
</div>
</body>
</html>

Answer 1

看来罪魁祸首是 grid.startup()。注意到另一个有类似问题的问题，提到启动调用的时间。将启动调用移动到选项卡显示之后（Contentpane 的 onShow 事件），并理顺了网格的绘制和 Rest 服务的查询。

隐藏tabcontainer中的DGrid只查询一次dstore

DGrid in a hidden tabcontainer only queries dstore one time

rest

dojo

tabcontainer

dgrid

dstore