DGrid в скрытом tabcontainer только один раз запрашивает dstore

У меня есть несколько DGrid OnDemandGrids, которые создаются в виде ряда вкладок, каждая из которых содержит область содержимого с сеткой. Сетки предназначены для службы отдыха, которая предоставляет заголовки диапазона, свойства идентификатора и т. Д. Первая / выбранная / видимая вкладка полностью заполняется несколькими вызовами службы отдыха, как и ожидалось. Некоторые другие вкладки заполнены нормально, но они малонаселены, поэтому требуется только один вызов в службу. На рассматриваемой вкладке отображаются только первые 25, поскольку она запрашивает службу только один раз (в хранилище данных более тысячи записей).

Таким образом, если вкладка проблемы является выбранной вкладкой до создания сетки, эта вкладка дважды вызывает остальную службу, чтобы заполнить видимую часть сетки. Если вкладка и сетка созданы до выбора, произошел только первый запрос (до открытия вкладки), и он находится в сетке, а остальная часть никогда не запрашивается. Я могу только догадываться, что, если вкладка не выбрана / не показана, сетка может не знать, сколько запрашивать, чтобы заполнить размер сетки, который соответствует вкладке.

Тестовый код приведен ниже, но использует службу внутреннего отдыха. Я смешал в DijitRegistry в сетке. Если у меня возникла проблема и я щелкнул один из столбцов для сортировки в сетке проблем, все заполняется правильно. Пробовал grid.resize и размещать сетку прямо на вкладке контейнера без какого-либо эффекта.

Простая OnDemandGrid, нацеленная на службу Rest, привязанную к DOM-идентификатору в области содержимого, добавляемую в tabcontainer, но вызывающую множество проблем...

Предложения?

<!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>
Источник

1 ответ

Решение

Похоже, виновник grid.startup(), Заметил еще один вопрос, у которого были похожие проблемы, в котором упоминалось время запуска звонка. Перенес стартовый вызов до тех пор, пока вкладка не будет показана (onShow событие Contentpane), и это выровняло рисунок сетки и запрос службы Отдых.

Источник
Другие вопросы по тегам