일련의 탭에 여러 개의 DGrid OnDemandGrid가 생성되며 각 탭에는 그리드가있는 내용 창이 들어 있습니다. 그리드는 범위 헤더, id 속성 등을 제공하는 Rest 서비스를 목표로합니다. 첫 번째/선택/표시되는 탭은 Rest 서비스에 대한 여러 호출을 예상대로 채 웁니다. 다른 탭 중 일부는 정상적으로 채워지지만 드물게 채워져 서비스에 한 번만 호출하면됩니다. 문제의 탭에는 서비스를 한 번만 쿼리하기 때문에 첫 번째 25 개만 표시됩니다 (데이터 저장소에있는 수천 개의 레코드가 넘음).숨겨진 tabcontainer의 DGrid는 dstore를 한 번만 쿼리합니다.
그리드를 만들기 전에 문제 탭이 선택된 탭인 경우 문제의 탭은 나머지 서비스를 두 번 호출하여 눈에 보이는 부분을 채 웁니다. 선택하기 전에 탭과 눈금을 만든 경우 탭을 열기 전에 첫 번째 쿼리 만 발생하고 그리드에 있고 나머지는 쿼리되지 않습니다. 탭이 선택/표시되지 않는다고 추측 할 수 있습니다. 그리드는 그리드의 크기를 채우기 위해 얼마나 많은 쿼리를해야할지 모를 수 있습니다.이 크기는 탭과 일치합니다.
테스트 코드는 아래에 포함되어 있지만 내부 휴식 서비스를 사용합니다. 그리드에서 DijitRegistry를 혼합했습니다. 문제가 발생하여 열의 하나를 클릭하여 문제 표를 정렬하면 모든 것이 올바르게 다시 채워집니다. Grid.resize를 시험해, 그리드를 tabcontainer에 직접 배치하는 일. 의 contentPane의 HREF의 DOM ID에 묶여 나머지 서비스를 대상으로
간단한 OnDemandGrid은있는 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>