egroupware/phpgwapi/js/egw_action/test/test_grid_view.html

161 lines
3.8 KiB
HTML
Raw Normal View History

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Grid Test</title>
<!-- Basic action stuff -->
<script src="../egw_action.js"></script>
<script src="../egw_action_common.js"></script>
<!-- Grid stuff -->
<script src="../egw_grid_view.js"></script>
<script src="../egw_grid_columns.js"></script>
<script src="../egw_grid_data.js"></script>
<script src="../egw_grid.js"></script>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="grid.css"/>
</head>
<body>
<h1>Test for dynamically displaying and loading grid lines</h1>
<b>Simulates network trafic by using window.setTimeout(), 100ms network latency</b>
<div id="container"></div>
<script>
var grid = null;
var actionManager = null;
var objectManager = null;
var columns =
[
{
"id": "name",
"caption": "Name",
"width": "20%",
"type": EGW_COL_TYPE_NAME_ICON_FIXED
},
{
"id": "size",
"caption": "Size"
},
{
"id": "rights",
"caption": "UNIX Filerights"
},
{
"id": "mime",
"caption": "File-Type/MIME"
},
{
"id": "atime",
"caption": "atime",
"width": "15%"
},
{
"id": "ctime",
"caption": "ctime",
"width": "15%"
},
{
"id": "mtime",
"caption": "mtime",
"width": "15%"
},
{
"id": "owner",
"caption": "owner",
"width": "10%"
},
{
"id": "group",
"caption": "group",
"width": "10%"
}
];
function fetchDataProc(_elems, _columns, _callback, _context)
{
// Delay the result a bit to simulate real network traffic
window.setTimeout(function() {
var result = [];
for (var i = 0; i < _elems.length; i++)
{
// console.log(_elems[i]);
if (_elems[i].substr(0, "[CHILDREN]".length) == "[CHILDREN]")
{
var id = _elems[i].substr("[CHILDREN]".length);
var children = [
{
"entryType": EGW_DATA_TYPE_RANGE,
"prefix": id + "_child_",
"canHaveChildren": true,
"count": 20
}
];
result.push({
"id": id,
"children": children,
"opened": true
});
}
else
{
var data = {};
data["size"] = Math.floor(Math.random() * 1024) + "KiB";
data["rights"] = "rwxr-xr--";
data["mime"] = "image/png";
data["atime"] = (new Date).toUTCString();
data["mtime"] = (new Date).toUTCString();
data["ctime"] = (new Date).toUTCString();
data["owner"] = "as";
data["group"] = "stylitedevs";
result.push({
"id": _elems[i],
"data": data,
"caption": _elems[i],
"iconUrl": "imgs/folder.png"
});
}
}
_callback.call(_context, result);
}, 100);
}
$(document).ready(function() {
actionManager = new egwActionManager();
objectManager = new egwActionObjectManager("", actionManager);
grid = new egwGrid($("#container"), columns, objectManager, fetchDataProc,
window);
grid.dataRoot.loadData(
[
{
"entryType": EGW_DATA_TYPE_RANGE,
"prefix": "root_elem_",
"canHaveChildren": true,
"count": 10000
}
]
);
grid.resize(1500, 500);
});
function check_positions()
{
var g = grid.gridOuter.grid;
var delta = - g.scrollarea.offset().top;
for (var i = 0; i < g.children.length; i++)
{
var rtop = g.children[i].parentNode.offset().top + g.scrollarea.scrollTop() - g.scrollarea.offset().top;
var itop = g.children[i].position;
console.log(Math.round(itop - rtop));
}
}
</script>
</body>
</html>