<!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="js/jquery.js"></script> <script src="../egw_action.js"></script> <script src="../egw_action_common.js"></script> <!-- Popup stuff --> <script src="../egw_action_popup.js"></script> <script src="../egw_menu.js"></script> <script src="../egw_menu_dhtmlx.js"></script> <script src="js/dhtmlxcommon.js"></script> <script src="js/dhtmlxmenu.js"></script> <script src="js/dhtmlxmenu_ext.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="../egw_stylesheet.js"></script> <link rel="stylesheet" href="grid.css"/> <link rel="stylesheet" href="skins/dhtmlxmenu_egw.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> <button onclick="buildGrid();">Leak</button> <button onclick="clean();">Clean</button> <div id="container"></div> <script> var grid = null; var actionManager = null; var objectManager = null; var columns = [ { "id": "check", "type": EGW_COL_TYPE_CHECKBOX }, { "id": "name", "caption": "Name", "type": EGW_COL_TYPE_NAME_ICON_FIXED, "sortable": EGW_COL_SORTABLE_EXTERNAL, "sortmode": EGW_COL_SORTMODE_ASC }, { "id": "size", "maxWidth": 100, "caption": "Size" }, { "id": "rights", "caption": "UNIX Filerights", "maxWidth": 150, "visibility": EGW_COL_VISIBILITY_INVISIBLE }, { "id": "mime", "caption": "File-Type/MIME", "maxWidth": 150, "visibility": EGW_COL_VISIBILITY_INVISIBLE }, { "id": "atime", "caption": "atime", "width": "15%", "visibility": EGW_COL_VISIBILITY_INVISIBLE }, { "id": "ctime", "caption": "ctime", "width": "15%", "visibility": EGW_COL_VISIBILITY_INVISIBLE }, { "id": "mtime", "caption": "mtime", "width": "15%", "visibility": EGW_COL_VISIBILITY_INVISIBLE }, { "id": "owner", "caption": "owner", "width": "10%", "visibility": EGW_COL_VISIBILITY_INVISIBLE }, { "id": "group", "caption": "group", "width": "10%", "visibility": EGW_COL_VISIBILITY_INVISIBLE } ]; var actions = [ { "id": "folder_open", "iconUrl": "imgs/folder.png", "caption": "Open folder", "onExecute": alertClicked, "allowOnMultiple": false, "type": "popup", "default": true }, { "id": "file_view", "iconUrl": "imgs/view.png", "caption": "View", "onExecute": alertClicked, "allowOnMultiple": false, "type": "popup", }, { "id": "file_preview", "iconUrl": "imgs/preview.png", "caption": "Preview", "onExecute": alertClicked, "allowOnMultiple": false, "type": "popup", "default": true }, { "id": "file_delete", "iconUrl": "imgs/delete.png", "caption": "Delete", "onExecute": alertClicked, "type": "popup", "group": 2 }, { "id": "file_edit", "iconUrl": "imgs/edit.png", "caption": "Edit file", "onExecute": alertClicked, "allowOnMultiple": false, "type": "popup" }, { "id": "file_compress", "iconUrl": "imgs/compress.png", "caption": "Create ZIP archive", "onExecute": alertClicked, "type": "popup", "group": 1, "order": 1 }, { "id": "file_email", "iconUrl": "imgs/email.png", "caption": "E-Mail", "onExecute": alertClicked, "allowOnMultiple": false, "type": "popup", "group": 1, "order": 0 }, { "id": "file_compress_email", "caption": "Create ZIP and E-Mail", "onExecute": alertClicked, "type": "popup", "group": 1, "order": 2 } ]; var listboxFolderLinks = [ {"actionId": "folder_open", "enabled": true}, {"actionId": "file_compress_email", "enabled": true}, {"actionId": "file_compress", "enabled": true}, {"actionId": "file_delete", "enabled": true} ]; 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", "group": "folder" }); } } _callback.call(_context, result); }, 100); } function clean() { $j("#container").children().remove(); actionManager = null; objectManager = null; grid = null; } function buildGrid() { clean(); var cnt = $j(document.createElement("div")); $j("#container").append(cnt); actionManager = new egwActionManager(); actionManager.updateActions(actions); objectManager = new egwActionObjectManager("", actionManager); grid = new egwGrid(cnt, columns, objectManager, fetchDataProc, null, window); grid.setActionLinkGroup("folder", listboxFolderLinks); grid.dataRoot.loadData( [ { "entryType": EGW_DATA_TYPE_RANGE, "prefix": "root_elem_", "canHaveChildren": true, "count": 1000 } ] ); grid.resize(1000, 500); grid.reload(); } $j(document).ready(function() { buildGrid(); }); function check_positions(_grid, _delta) { var outer = grid.gridOuter.grid; if (typeof _grid == "undefined") { _grid = outer; } if (typeof _delta == "undefined") { _delta = 0; } var g = _grid; var delta = outer.scrollarea.scrollTop() - outer.scrollarea.offset().top; for (var i = 0; i < g.children.length; i++) { var rtop = g.children[i].parentNode.offset().top + delta; var itop = g.children[i].position + _delta; var rheight = g.children[i].parentNode.outerHeight(); var iheight = g.children[i].getHeight(); console.log(Math.round(itop - rtop), Math.round(iheight - rheight), g.children[i].visible); if (g.children[i].containerClass == "grid" && g.children[i].visible) { console.log("-->"); check_positions(g.children[i], itop); console.log("<--"); } } } function alertClicked(_action, _senders) { var ids = ""; for (var i = 0; i < _senders.length; i++) ids += _senders[i].id + ((i < _senders.length - 1) ? ", " : ""); alert("Action '" + _action.caption + "' executed on elements '" + ids + "'"); } </script> </body> </html>