mirror of
https://github.com/EGroupware/egroupware.git
synced 2024-11-24 17:04:14 +01:00
f430b66d3b
classes are now uppercase and in their own files. lowercase classes are deprecated.
Interfaces are now actual interfaces that should be implemented instead of creating and returning an ai Object every time
(cherry picked from commit 5e3c67a5cf)
201 lines
5.9 KiB
HTML
201 lines
5.9 KiB
HTML
<html>
|
|
<head>
|
|
<title>ET2 - Test</title>
|
|
|
|
<script src="jquery.js"></script>
|
|
<script src="../../jsapi/jsapi.js"></script>
|
|
<script src="../../egw_json.js"></script>
|
|
<script src="../../jquery/jquery.tools.min.js"></script>
|
|
<script src="../../jquery/jquery-ui.js"></script>
|
|
|
|
<script src="../../egw_action/egw_action.ts"></script>
|
|
<script src="../../egw_action/egw_action_common.ts"></script>
|
|
|
|
<script>
|
|
// Create the egw object template
|
|
window["egw"] = {
|
|
'prefsOnly': true
|
|
};
|
|
</script>
|
|
<script src="../../jsapi/egw_core.js"></script>
|
|
<script src="../../jsapi/egw_utils.js"></script>
|
|
<script src="../../jsapi/egw_css.js"></script>
|
|
<script src="../../jsapi/egw_debug.js"></script>
|
|
|
|
<script src="../../jsapi/egw_inheritance.js"></script>
|
|
<script src="../et2_core_inheritance.js"></script>
|
|
<script src="../et2_core_interfaces.js"></script>
|
|
<script src="../et2_core_common.js"></script>
|
|
|
|
<script src="../et2_widget_dynheight.js"></script>
|
|
|
|
<script src="../et2_dataview_interfaces.js"></script>
|
|
<script src="../et2_dataview_controller.js"></script>
|
|
<script src="../et2_dataview_controller_selection.js"></script>
|
|
<script src="../et2_dataview_model_columns.js"></script>
|
|
<script src="../et2_dataview_view_aoi.js"></script>
|
|
<script src="../et2_dataview_view_rowProvider.js"></script>
|
|
<script src="../et2_dataview_view_container.js"></script>
|
|
<script src="../et2_dataview_view_grid.js"></script>
|
|
<script src="../et2_dataview_view_spacer.js"></script>
|
|
<script src="../et2_dataview_view_row.js"></script>
|
|
<script src="../et2_dataview_view_resizeable.js"></script>
|
|
<script src="../et2_dataview.js"></script>
|
|
|
|
<link rel="StyleSheet" type="text/css" href="./test.css" />
|
|
<link rel="StyleSheet" type="text/css" href="./grid.css" />
|
|
|
|
</head>
|
|
<body>
|
|
<h1>EGroupware ETemplate2 Dataview Test</h1>
|
|
|
|
<div>
|
|
<button id="update">Update</button>
|
|
<button id="refresh">Refresh</button>
|
|
<span id="range" style="float: right; font-size: 12pt; padding-right: 10px">0-0</span>
|
|
</div>
|
|
|
|
<div id="container" style="margin:0; padding:0;">
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
document.getElementById("update").onclick = function () {
|
|
controller.update();
|
|
};
|
|
|
|
document.getElementById("refresh").onclick = function () {
|
|
controller.reset();
|
|
};
|
|
|
|
// The column data object contains the data which is used to setup
|
|
// the column properties (visibility, width) etc. "caption" is only
|
|
// used to build the column selection menu (which is not used in
|
|
// this example)
|
|
var columnData = [
|
|
{
|
|
"id": "col_0",
|
|
"caption": "Name",
|
|
"visibility": ET2_COL_VISIBILITY_VISIBLE,
|
|
"width": "50%"
|
|
},
|
|
{
|
|
"id": "col_1",
|
|
"caption": "Size",
|
|
"visibility": ET2_COL_VISIBILITY_VISIBLE,
|
|
"width": "auto"
|
|
},
|
|
{
|
|
"id": "col_2",
|
|
"caption": "Creation Date",
|
|
"visibility": ET2_COL_VISIBILITY_VISIBLE,
|
|
"width": "auto"
|
|
}
|
|
];
|
|
|
|
var data = new Array(1000);
|
|
for (var i = 0; i < data.length; i++)
|
|
{
|
|
data[i] = "uid_" + i;
|
|
}
|
|
|
|
var dataprovider = ClassWithAttributes.extend(et2_IDataProvider, {
|
|
|
|
dataFetch: function (_queriedRange, _callback, _context) {
|
|
var response = {
|
|
"order": data.slice(_queriedRange.start, _queriedRange.start + _queriedRange.num_rows),
|
|
"total": data.length
|
|
};
|
|
|
|
window.setTimeout(function () {
|
|
_callback.call(_context, response)
|
|
}, Math.round(100 + Math.random() * 750));
|
|
},
|
|
|
|
dataRegisterUID: function (_uid, _callback, _context) {
|
|
_callback.call(_context, {
|
|
"caption": "Row " + _uid
|
|
});
|
|
},
|
|
|
|
dataUnregisterUID: function (_uid, _callback, _context) {
|
|
//
|
|
}
|
|
|
|
});
|
|
|
|
/**
|
|
* The row callback gets called by the gridview controller whenever
|
|
* the actual DOM-Nodes for a node with the given data have to be
|
|
* created.
|
|
*/
|
|
function rowCallback(_data, _row, _idx)
|
|
{
|
|
var tr = _row.getDOMNode();
|
|
|
|
var row = dataview.rowProvider.getPrototype("default");
|
|
$j("div", row).each(function () { $j(this).text("#" + _idx + " " + _data.caption) });
|
|
$j(tr).append(row.children());
|
|
|
|
_row.makeExpandable(true, function () {
|
|
var grid = new et2_dataview_grid(_row, dataview.grid);
|
|
var controller = new et2_dataview_controller(grid,
|
|
new dataprovider(), rowCallback, linkCallback, null,
|
|
objectManager);
|
|
controller.update();
|
|
|
|
return grid;
|
|
});
|
|
}
|
|
|
|
function linkCallback() {
|
|
return [];
|
|
}
|
|
|
|
// The dynheight object is responsible for automatically resizing
|
|
// the gridContainer to its maximum extends
|
|
var dynheight = new et2_dynheight(window, $j("#container"), 150);
|
|
|
|
// The et2_dataview_gridContainer object is the outer grid container
|
|
// which is responsible for displaying the columns etc.
|
|
var dataview = new et2_dataview($j("#container"), egw(window));
|
|
|
|
// Load the column data
|
|
dataview.setColumns(columnData);
|
|
|
|
// Register the callback for displaying the range
|
|
dataview.grid.setInvalidateCallback(function (range) {
|
|
$j("#range").text("Showing elements " + (range.top + 1) + " - " + (range.bottom + 1) + " of " + dataview.grid.getTotalCount());
|
|
});
|
|
|
|
// Create the action manager and the object manager (optional)
|
|
var actionManager = egw_getActionManager("test");
|
|
var objectManager = egw_getObjectManager("test");
|
|
|
|
// Create the gridview controller
|
|
var controller = new et2_dataview_controller(dataview.grid,
|
|
new dataprovider(), rowCallback, linkCallback, null,
|
|
objectManager);
|
|
|
|
// Trigger the initial update
|
|
controller.update();
|
|
|
|
// Write something inside the column headers
|
|
for (var i = 0; i < columnData.length; i++)
|
|
{
|
|
$j(dataview.getHeaderContainerNode(i)).text(columnData[i].caption);
|
|
}
|
|
|
|
// Register a resize callback
|
|
$j(window).resize(function() {
|
|
dynheight.update(function(_w, _h) {
|
|
dataview.resize(_w, _h);
|
|
});
|
|
});
|
|
|
|
$j(window).resize();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|