<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Rest store</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../dojo/resources/dojo.css";
|
@import "../css/dgrid.css";
|
@import "../css/skins/claro.css";
|
|
h2 {
|
margin: 12px;
|
}
|
|
.heading {
|
font-weight: bold;
|
padding-bottom: 0.25em;
|
}
|
|
.dgrid {
|
margin: 10px;
|
}
|
</style>
|
<script src="../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
require([
|
"dojo/_base/lang",
|
"dgrid/List",
|
"dgrid/OnDemandGrid",
|
"dgrid/Selection",
|
"dgrid/Editor",
|
"dgrid/Keyboard",
|
"dgrid/Tree",
|
"dojo/_base/declare",
|
"dojo/query",
|
"dstore/Rest",
|
"dstore/Trackable",
|
"dstore/Cache",
|
"dstore/Tree",
|
"dojo/domReady!"
|
], function (lang, List, Grid, Selection, Editor, Keyboard, Tree, declare, query, Rest, Trackable, Cache, TreeStore) {
|
|
var CustomGrid = declare([Grid, Selection, Keyboard, Editor, Tree], {
|
insertRow: function () {
|
refreshed = true;
|
return this.inherited(arguments);
|
},
|
|
removeRow: function () {
|
refreshed = true;
|
return this.inherited(arguments);
|
},
|
|
logPreload: function () {
|
var line = '';
|
for (var i = 0; i < 160; i++) {
|
line += '\u2500';
|
}
|
console.log(line);
|
var preload = this.preload;
|
if (preload) {
|
while (preload.previous) {
|
preload = preload.previous;
|
}
|
var preloads = [];
|
var preloadNodes = [];
|
var height = 0;
|
var totalPossibleRows = 0;
|
while (preload) {
|
preloads.push(preload);
|
var node = preload.node;
|
height += node.offsetHeight;
|
totalPossibleRows += preload.count;
|
preloadNodes.push({
|
preloadId: node.getAttribute('data-preloadid'),
|
rowIndex: node.rowIndex,
|
height: node.style.height,
|
offsetTop: node.offsetTop,
|
offsetHeight: node.offsetHeight
|
});
|
preload = preload.next;
|
}
|
console.table(preloads);
|
console.table(preloadNodes);
|
var realRowCount = query('.dgrid-row', grid.contentNode).length;
|
height += 24 * realRowCount;
|
totalPossibleRows += realRowCount;
|
console.log('Height calculated from preloads = ', height);
|
|
|
console.log('Actual grid content height = ', gridContentHeight());
|
console.log('Total possible rows = ', totalPossibleRows);
|
console.log('Current row count = ', realRowCount);
|
}
|
}
|
});
|
|
function createStore(config) {
|
var store = new declare([Rest, Trackable, Cache, TreeStore])(lang.mixin({
|
target: "./data/rest.php",
|
put: function (object) {
|
return object;
|
}
|
}, config));
|
|
store.getRootCollection = function () {
|
return this.root.filter({ parent: undefined });
|
};
|
|
return store;
|
}
|
|
function getColumns() {
|
return [
|
{ label: 'Name', field: 'name', sortable: false, renderExpando: true },
|
{ label: 'Id', field: 'id' },
|
{ label: 'Comment', field: 'comment', sortable: false, editor: "text" },
|
{ label: 'Boolean', field: 'boo', sortable: false, autoSave: true, editor: "checkbox" }
|
];
|
}
|
|
window.grid = new CustomGrid({
|
pagingMethod: 'throttleDelayed',
|
collection: createStore().getRootCollection(),
|
sort: "id",
|
getBeforePut: false,
|
columns: getColumns()
|
}, "grid");
|
|
var refreshed = false;
|
var prevContentHeight = 0;
|
setInterval(function () {
|
var contentHeight = gridContentHeight();
|
if (refreshed || prevContentHeight != contentHeight) {
|
prevContentHeight = contentHeight;
|
refreshed = false;
|
grid.logPreload();
|
}
|
}, 1500);
|
|
function gridContentHeight() {
|
var contentHeight = 0;
|
var childNodes = grid.contentNode.childNodes;
|
var len = childNodes.length;
|
for (var i = 0; i < len; i++) {
|
contentHeight += childNodes[i].offsetHeight;
|
}
|
return contentHeight;
|
}
|
|
new CustomGrid({
|
collection: createStore({ useRangeHeaders: true }).getRootCollection(),
|
sort: "id",
|
getBeforePut: false,
|
columns: getColumns()
|
}, "gridRangeHeaders");
|
});
|
|
</script>
|
</head>
|
<body class="claro">
|
<h2>A basic grid with Rest store</h2>
|
<div id="grid"></div>
|
|
<h2>A basic grid with Rest store using range headers</h2>
|
<div id="gridRangeHeaders"></div>
|
</body>
|
</html>
|
