0

一連のタブで作成されているいくつかの DGrid OnDemandGrids があり、それぞれにグリッド付きの contentpane が含まれています。グリッドは、範囲ヘッダー、id プロパティなどを提供する Rest サービスをターゲットにしています。最初/選択/表示されているタブは、予想どおり、Rest サービスへの複数の呼び出しで完全に埋められます。他のタブのいくつかは正常に入力されますが、それらはまばらに入力されているため、サービスを 1 回呼び出すだけで済みます。問題のタブは最初の 25 件のみを表示します。これは、サービスを 1 回だけ照会するためです (データストアには 1000 を超えるレコードがあります)。

したがって、問題のタブがグリッドを作成する前に選択されたタブである場合、問題のタブは残りのサービスを 2 回呼び出して、グリッドの表示部分を埋めます。選択する前にタブとグリッドが作成された場合、(タブが開かれる前に) 最初のクエリのみが発生し、グリッド内にあり、残りはクエリされません。タブが選択/表示されていないと推測できますが、グリッドは、タブに一致するグリッドのサイズを満たすためにどれだけクエリを実行する必要があるかを認識していない可能性があります。

テスト コードは以下に含まれていますが、内部の REST サービスを使用しています。グリッドに DijitRegistry を混在させました。問題が発生し、列の 1 つをクリックして問題のグリッドで並べ替えると、すべてが正しく入力されます。grid.resize を試し、グリッドを tabcontainer に直接配置しても効果はありませんでした。

タブコンテナに追加された contentpane の href の DOM ID に関連付けられた Rest サービスを対象とするシンプルな OnDemandGrid ですが、多くの問題を引き起こしています...

提案？

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

1 に答える 1