Author: abelevich Date: 2007-05-07 14:41:24 -0400 (Mon, 07 May 2007) New Revision: 682 Added: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/ArrayDataModel.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/DataModel.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js Log: Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/ArrayDataModel.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/ArrayDataModel.js 2007-05-07 18:36:19 UTC (rev 681) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/ArrayDataModel.js 2007-05-07 18:41:24 UTC (rev 682) @@ -27,9 +27,6 @@ getRow: function(index) { return this.data[index]; }, - getRows: function(indexFrom, indexTo) { - return $A(this.data.slice(indexFrom, indexTo)); - }, getCount: function() { return this.data.length; }, Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/DataModel.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/DataModel.js 2007-05-07 18:36:19 UTC (rev 681) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/DataModel.js 2007-05-07 18:41:24 UTC (rev 682) @@ -31,11 +31,6 @@ return []; }, - // interface method - getRows: function(indexFrom, indexTo) { - return []; - }, - // count of all data rows getCount: function() { return 0; Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid.js 2007-05-07 18:36:19 UTC (rev 681) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid.js 2007-05-07 18:41:24 UTC (rev 682) @@ -302,6 +302,9 @@ }, invalidate: function(params) { this.getBody().invalidate(params); + }, + test: function() { + this.getBody().test(); } }) Added: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js (rev 0) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js 2007-05-07 18:41:24 UTC (rev 682) @@ -0,0 +1,312 @@ +/** + * Grid.js Date created: 6.04.2007 + * Copyright (c) 2007 Exadel Inc. + * @author Denis Morozov <dmorozov(a)exadel.com&gt; + */ +ClientUILib.declarePackage("ClientUI.controls.grid.Grid"); + +ClientUILib.requireClass("ClientUI.common.box.Box"); +ClientUILib.requireClass("ClientUI.controls.grid.GridHeader"); +ClientUILib.requireClass("ClientUI.controls.grid.GridBody2"); +ClientUILib.requireClass("ClientUI.controls.grid.GridFooter"); +ClientUILib.requireClass("ClientUI.controls.grid.CellsStrip"); + +/* + * grid.js - Grid library on top of Prototype + * by Denis Morozov <dmorozov(a)exadel.com&gt; distributed under the BSD license. + * + * TODO: description of control + * + * TODO: usage description + * Usage: + * <script src="/javascripts/prototype.js" type="text/javascript"></script> + * <script src="/javascripts/extend.js" type="text/javascript"></script> + * <script src="/javascripts/grid.js" type="text/javascript"></script> + * <script type="text/javascript"> + * // with valid DOM id + * var grid = new ClientUI.controls.grid.Grid('id_of_trigger_element', 'id_of_tooltip_to_show_element') + * + * // with text + * var grid = new ClientUI.controls.grid.Grid('id_of_trigger_element', 'a nice description') + * </script> + */ +ClientUI.controls.grid.Grid2 = Class.create({ + CLASSDEF: { + name: 'ClientUI.controls.grid.Grid2', + parent: ClientUI.common.box.Box + } + +}); + +Object.extend(ClientUI.controls.grid.Grid2.prototype, { + // Custom events + /** + * Occured when content header clicked + */ + eventOnSort: {}, + + initialize: function(element, dataModel, templates, options) { + ClientUI.controls.grid.Grid2.parentClass.constructor().call(this, element); + if(!element || !element.id) + this.element.id = "ClientUI_Grid" + ClientUI_controls_grid_Grid_idGenerator++; + + this.dataModel = dataModel; + this.templates = $A(templates); + + this.eventOnSort = new ClientUI.common.utils.CustomEvent('OnSort'); + + // grid options + this.options = { + showIndexColumn: false, + indexColumnWidth: 30 + }; + if(options) { Object.extend(this.options, options); } + + this.createControl(); + }, + createControl: function() { + var grid = this; + var layout = new ClientUI.layouts.GridLayoutManager(null, this.getElement()); + this.layout = layout; + + this.templates.each(function(item) { + switch(item.pane) { + case GridLayout_Enum.HEADER: + var header = new ClientUI.controls.grid.GridHeader($(item.ref), grid); + layout.addPane(GridLayout_Enum.HEADER, header); + break; + case GridLayout_Enum.BODY: + var body = new ClientUI.controls.grid.GridBody2($(item.ref), grid); + layout.addPane(GridLayout_Enum.BODY, body); + break; + case GridLayout_Enum.FOOTER: + var footer = new ClientUI.controls.grid.GridFooter($(item.ref), grid); + layout.addPane(GridLayout_Enum.FOOTER, footer); + break; + } + }); + + // create cells strips + this._columnsStrip = []; + var columns = this.getHeader().getColumns(); + for(var i=0; i<columns.length; i++) { + this._columnsStrip[i] = new ClientUI.controls.grid.CellsStrip({ + columnWidth: columns[i].object.getWidth(), + basePos: columns[i].object.getX(), + frozen: columns[i].frozen + }); + } + + this._parseRowAndAddToStrips("header", this.getHeader().getRow()); + if(this.getFooter()) { + this._parseRowAndAddToStrips("footer", this.getFooter().getRow()); + } + + this.currentScrollPos = 0; + this.controlCreated = true; + this.updateLayout(); + }, + updateLayout: function() { + if(!this.controlCreated) { + return; + } + ClientUI.controls.grid.Grid2.parentClass.method("updateLayout").call(this); + if(this.layout) { + this.layout.updateLayout(); + } + }, + getHeader: function() { + return this.layout.getPane(GridLayout_Enum.HEADER); + }, + getFooter: function() { + return this.layout.getPane(GridLayout_Enum.FOOTER); + }, + getBody: function() { + return this.layout.getPane(GridLayout_Enum.BODY); + }, + _getVisibleHeaderControls: function() { + var controls = []; + var columns = this.getHeader().getColumns(); + columns.each(function(column){ + var ctrls = $A(column.body.getElement().getElementsByTagName("select")); + ctrls.each(function(ctrl){ + if(Element.visible(ctrl)) { + controls.push(ctrl); + } + }); + }); + return controls; + }, + adjustColumnWidth: function(index, width) { + var oldWidth = this.getHeader().getColumns()[index].object.getWidth(); + + // 1. set new width + this._columnsStrip[index].setWidth(width); + + // Hide controls in IE that flipped in other case + var ctrlsIE = []; + if(ClientUILib.isIE) { + ctrlsIE = this._getVisibleHeaderControls(); + ctrlsIE.each(function(ctrl){ + Element.hide(ctrl); + }); + } + + // 2. shift right side columns + if(index < this._columnsStrip.length-1) { + var count = this._columnsStrip.length; + if(this._columnsStrip[index].frozen) { + // if current column is frozen, lets find last frozen column index + var i=index+1; + while(this._columnsStrip[i].frozen && i<count) { + i++; + } + count = i; + } + + var offset = width - oldWidth; + for(var i=index+1; i<count; i++) { + this._columnsStrip[i].setOffset(offset, true); + } + } + + this.updateLayout(); + + if(ClientUILib.isIE) { + ctrlsIE.each(function(ctrl){ + Element.show(ctrl); + }); + } + }, + adjustScrollPosition: function(pos) { + if(pos<0) {pos = 0;} + this.currentScrollPos = pos; + var i=0; + while(i<this._columnsStrip.lenth && this._columnsStrip[i].frozen) i++; + if(i<this._columnsStrip.length) { + while(i<this._columnsStrip.length) { + this._columnsStrip[i++].setOffset(pos, false, true); + } + } + this.getHeader().adjustScrollPosition(pos); + this.getBody().adjustScrollPosition(pos); + if(this.getFooter()) {this.getFooter().adjustScrollPosition(pos);} + }, + loadData: function() { + this.getBody().adjustDataPosition(0); + }, + frozeColumn: function(index, froze) { + if(index<0 || index>=this.getHeader().getColumns().length) + return false; + this.getHeader().getColumns()[index].frozen = froze; + }, + setColumnMinWidth: function(index, width) { + if(index<0 || index>=this.getHeader().getColumns().length) + return false; + this.getHeader().getColumns()[index].minWidth = width; + return true; + }, + _isSeparator: function(element) { + return Element.hasClassName(element, this.getHeader().CLASSDEF.sepStyleClass); + }, + _isCell: function(element) { + return element.tagName && element.tagName.toLowerCase()!="iframe"; + }, + // helper method parse row of elements and add separately into rows and columns list + _parseRowAndAddToStrips: function(id, object) { + var i=0, j=0, cells, cell, count=0; + if(object.frozen && object.normal) { + // process frozen columns + cells = object.frozen.getElement().childNodes; + count = cells.length; + for(i=0, j=0; i<count; i++) { + cell = cells[i]; + if(this._isCell(cell) && !this._isSeparator(cell)) { + this._columnsStrip[j].add(id, new ClientUI.controls.grid.ColumnCell( + cell, + this._columnsStrip[j])); + j++; + } + } + var sripIndex = j; + for(i=0, j=0; i<count; i++) { // process separators + cell = cells[i]; + if(this._isSeparator(cell)) { + var columnCell = new ClientUI.controls.grid.ColumnCell( + cell, + this._columnsStrip[j]); + columnCell.separator = true; + this._columnsStrip[j].add(id, columnCell); + j++; + } + } + + // process normal columns + i = sripIndex; + cells = object.normal.getElement().childNodes; + for(j=0; j<cells.length; j++) { + cell = cells[j]; + if(this._isCell(cell) && !this._isSeparator(cell)) { + this._columnsStrip[i].add(id, new ClientUI.controls.grid.ColumnCell( + cell, + this._columnsStrip[i])); + i++; + } + } + i = sripIndex; + for(j=0; j<cells.length; j++) { // process separators + cell = cells[j]; + if(this._isSeparator(cell)) { + var columnCell = new ClientUI.controls.grid.ColumnCell( + cell, + this._columnsStrip[i]); + columnCell.separator = true; + this._columnsStrip[i].add(id, columnCell); + i++; + } + } + } + }, + _getParsedRowsCount: function() { + return this._columnsStrip[0].length(); + }, + _removeRowFromStrips: function(id) { + this._columnsStrip.each(function(strip){ + strip.remove(id); + }); + }, + getColumnScrollX: function(index) { + if(index) { + return index<this._columnsStrip.length ? this._columnsStrip[index].currOffset : this.currentScrollPos; + } + + return this.currentScrollPos; + }, + getColumnsTotalWidth: function() { + var totalWidth = 0; + this.getHeader().getColumns().each(function(column){ + totalWidth += column.object.getWidth(); + }); + + return totalWidth; + }, + getColumnsFrozenWidth: function() { + var totalWidth = 0; + var columns = this.getHeader().getColumns(); + var i = 0; + while(i<columns.length && columns[i].frozen) { + totalWidth += columns[i++].object.getWidth(); + } + return totalWidth; + + }, + invalidate: function(params) { + this.getBody().invalidate(params); + }, + test: function() { + this.getBody().test(); + } +}) + +var ClientUI_controls_grid_Grid_idGenerator = 0; + Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js 2007-05-07 18:36:19 UTC (rev 681) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js 2007-05-07 18:41:24 UTC (rev 682) @@ -74,13 +74,36 @@ this.setScrollPos(ypos); this.adjustDataPosition(ypos); }, + test: function() { + ClientUILib.log(ClientUILogger.WARNING, "Perfomance test started...."); + currTime = (new Date()).getTime(); + + var rows = []; + for(var i=0; i<100; i++) { + var row = this.createRow(); + row.setRowIndex(i); + row.showEmpty(); + rows.push(row); + } + + ClientUILib.log(ClientUILogger.WARNING, "100 rows created over: " + ((new Date()).getTime() - currTime) + " miliseconds."); + currTime = (new Date()).getTime(); + + for(var i=0; i<100; i++) { + var rowData = this.grid.dataModel.getRow(i); + rows[i].loadRowData(rows[i], i, rowData); + } + + ClientUILib.log(ClientUILogger.WARNING, "100 rows loaded over: " + ((new Date()).getTime() - currTime) + " miliseconds."); + }, _onDataReady: function(options) { - // load rows data + // load rows data + var currTime = (new Date()).getTime(); + var loadRow = this.loadRow.bind(this); var byIndex = options.indexes!==null; var count = options.indexes!==null ? options.indexes.length : (options.ids!==null?options.ids.lenth : 0); - var i; - for(i=0; i<count; i++) { + for(var i=0; i<count; i++) { loadRow( options.indexes!==null ? options.indexes[i] : null, options.ids!==null ? options.ids[i] : null); @@ -90,7 +113,12 @@ if(ClientUILib.isIE && !ClientUILib.isIE7) { this.setScrollPos(this.currentPos); this.adjustScrollPosition(this.grid.getColumnScrollX()); - } + } + + ClientUILib.log(ClientUILogger.WARNING, "data for "+count+" rows loaded over: " + ((new Date()).getTime() - currTime) + " miliseconds."); + ClientUILib.log(ClientUILogger.WARNING, "load data delta time: " + (this.taskStartTime - this.taskDefineTime)); + ClientUILib.log(ClientUILogger.WARNING, "data prepare time: " + (this.taskStartLoadingTime - this.taskStartTime)); + ClientUILib.log(ClientUILogger.INFO, "Load data indexes: " + options.ids.inspect()); }, registerEvents: function() { Event.observe(this.scrollBox.eventHScroll, "grid body hscroll", this._eventOnHScroll); @@ -336,9 +364,8 @@ } }); - //if(ClientUILib.isGecko) { - headerRow.hide(); - //} + headerRow.hide(); + headerFrozenRow.hide(); this.headerRowTemplate = headerRow; this.headerFrozenRowTemplate = headerFrozenRow; }, @@ -356,6 +383,9 @@ getId: function() { return this.id; }, + getIdForCell: function(row, column) { + return "c_"+ row +"_" + column; + }, setId: function(id) { this.id = id; this.frozen.getElement().id = id; @@ -366,17 +396,15 @@ var cnt = this.frozen.getElement().childNodes.length; for(i=0; i<cnt; i++) { cellObj = this.frozen.getElement().childNodes[i]; - cellObj.id = "c_"+ this.rowindex +"_" + index++; - cB = document.getElementsByClassName("ClientUI_Grid_BCBody", cellObj); - cB[0].id = "b"+ cellObj.id; + cellObj.id = this.getIdForCell(this.rowindex, index++); + cellObj.childNodes[0].id = "b"+ cellObj.id; } cnt = this.normal.getElement().childNodes.length; for(i=0; i<cnt; i++) { cellObj = this.normal.getElement().childNodes[i]; - cellObj.id = "c_"+ this.rowindex +"_" + index++; - cB = document.getElementsByClassName("ClientUI_Grid_BCBody", cellObj); - cB[0].id = "b"+ cellObj.id; + cellObj.id = this.getIdForCell(this.rowindex, index++); + cellObj.childNodes[0].id = "b"+ cellObj.id; } }, setRowIndex: function(index) { @@ -441,23 +469,13 @@ }, showEmpty: function() { this.moveToY(this.parent.defaultRowHeight * this.rowindex); - if(!(ClientUILib.isIE && !ClientUILib.isIE7)) { - this.setRowClass(this.rowindex%2 ? false : true); - this.show(); - this.showWaitData(true); - } + this.setRowClass(this.rowindex%2 ? false : true); + //this.show(); + //this.showWaitData(true); }, showNormal: function() { this.show(); - if(ClientUILib.isIE && !ClientUILib.isIE7) { - this.setRowClass(this.rowindex%2 ? false : true); - if(this.parent.grid.options.showIndexColumn) { - this.setCellValue(0, ""+this.rowindex); - } - } - else { - this.showWaitData(false); - } + this.showWaitData(false); }, loadRowData: function(row, index, rowData) { @@ -478,11 +496,10 @@ return true; }, getCellsToUpdate: function() { - var fcs = $A(document.getElementsByClassName("ClientUI_Grid_BCBody", this.frozen.getElement())); - var ncs = $A(document.getElementsByClassName("ClientUI_Grid_BCBody", this.normal.getElement())); + var count = this.parent.grid.getHeader().getColumns().length; var ids = []; - fcs.each(function (cell){ids.push(cell.id);}); - ncs.each(function (cell){ids.push(cell.id);}); + for(var i=0; i<count; i++) + ids.push("b"+ this.getIdForCell(this.rowindex, i)); return ids; } }; @@ -561,17 +578,6 @@ if(this.dataViewHash) { row = this.dataViewHash[index]; } - if(row===null && index!==null) { - row = this.dataView.findAll(function(item){return item && item.rowindex==index;}); - row = row && row.length && row.length>0 ? row[0] : null; - } - if(row===null && id!==null){ - var rowEl = document.getElementById(id); - if(rowEl!==null) { - index = rowEl.length ? rowEl[0].rowindex : rowEl.rowindex; - row = this.dataView.findAll(function(item){return item && item.rowindex==index;}); - } - } if(row) { var rowData = this.grid.dataModel.getRow(index); if(rowData && rowData.length && rowData.length > 0) { @@ -587,12 +593,7 @@ row.rowindex = -1; this.rowsPool.push(row); }, - adjustDataPosition: function (pos) { - // small improvement - if(this.dataView.length > 0 && Math.abs(this.currentPos - pos)/this.defaultRowHeigh < this.dataDelta/2) { - return; - } - + adjustDataPosition: function (pos) { // 1. calculate direction and range to load next data var forwardDir = this.currentPos <= pos; this.currentPos = pos; @@ -606,133 +607,89 @@ var to = Math.min(first + this.dataVisible+this.dataDelta, this.grid.dataModel.getCount()); var range = $R(from, to); - if(from === to) { + if(from >= to) { ClientUILib.log(ClientUILogger.WARNING, "!!! GridBody: adjustDataPosition. Pos: " + pos + ", From:" + from + ", To:" + to); return; } - - // 3. hide invisible rows - var dataViewHash = []; - var deleteRow = this.deleteRow.bind(this); - this.dataView.each(function(item) { - if(item && item.rowindex>=0) { - if(!range.include(item.rowindex)) { - deleteRow(item); - } - else { - dataViewHash[item.rowindex] = item; - } - } - }); - // make some cleanup of deleted rows - this.dataView = this.dataView.findAll(function(item) { - return item && item.rowindex>=0; - }); - // 4. show empty rows - var rowIndex = 0; - var rowsToLoad = []; - var rowsToLoadIdx = []; - var row, i; - for(i=range.start; i<=range.end; i++) { - if(!dataViewHash[i]) { - row = this.getRow(); - row.setRowIndex(i); - row.showEmpty(); - this.dataView.push(row); - dataViewHash[i] = row; - rowsToLoadIdx.push(i); - rowsToLoad.push(row.getCellsToUpdate()); - rowIndex++ - } - } - this.dataViewHash = dataViewHash; - - if(rowIndex > 0) { - // stop timed adjusting - var task = this._getPendingTask(); - clearTimeout(task.timer); + // stop timed adjusting + var task = this._getPendingTask(); + clearTimeout(task.timer); + if(to - from > 0) { task.timer = null; - - while(task.rowsToLoadIdx.length) { - var index = task.rowsToLoadIdx.pop(); - var ids = task.rowsToLoad.pop(); - if(dataViewHash[index]) { - rowsToLoadIdx.push(index); - rowsToLoad.push(ids); - } - } - - task.rowsToLoadIdx = rowsToLoadIdx; - task.rowsToLoad = rowsToLoad; + task.from = from; + task.to = to; this._setPendingTask(task); - } - }, + } + }, _getPendingTask: function() { if(!this.pendingTask) { this.pendingTask = { timer: null, rowsToLoad: [], - rowsToLoadIdx: [] + rowsToLoadIdx: [], + from: 0, + to: 0 }; } return this.pendingTask; - }, + }, _setPendingTask: function(task) { // and plan other agjusting over the time + this.taskDefineTime = (new Date()).getTime(); task.timer = setTimeout(function() { + this.taskStartTime = (new Date()).getTime(); + var range = $R(task.from, task.to); - //ClientUILib.log(ClientUILogger.INFO, "Load data indexes: " + task.rowsToLoadIdx.inspect()); - //ClientUILib.log(ClientUILogger.INFO, "ViewSize: " + this.dataView.length); - ClientUILib.log(ClientUILogger.INFO, "Load data indexes: " + task.rowsToLoad.inspect()); + // 1. hide invisible rows + this.dataViewHash = []; + var newDataView = []; + var count = this.dataView.length; + for(var i=0; i<count; i++) { + var row = this.dataView[i]; + if(!range.include(row.rowindex)) { + this.deleteRow(row); + } + else { + this.dataViewHash[row.rowindex] = this.dataView[i]; + newDataView.push(row); + } + } + this.dataView = newDataView; + // 2. show empty rows + var rowsToLoad = []; + var rowsToLoadIdx = []; + var row, i; + for(i=task.from; i<=task.to; i++) { + if(!this.dataViewHash[i]) { + row = this.getRow(); + row.setRowIndex(i); + row.showEmpty(); + this.dataView.push(row); + this.dataViewHash[i] = row; + rowsToLoadIdx.push(i); + rowsToLoad.push(row.getCellsToUpdate()); + } + } + + this.taskStartLoadingTime = (new Date()).getTime(); // 4. start data loading this.grid.dataModel.loadRows({ - indexes: task.rowsToLoadIdx, - ids: task.rowsToLoad}); + indexes: rowsToLoadIdx, + ids: rowsToLoad}); + clearTimeout(task.timer); task.timer = null; - task.rowsToLoad = []; - task.rowsToLoadIdx = []; + task.from = 0; + task.to = 0; }.bind(this), this.grid.dataModel.getRequestDelay()); this.pendingTask = task; - }, + }, invalidate: function(options) { - // load rows data - var byIndex = options.indexes!==null; - var count = options.indexes!==null ? options.indexes.length : (options.ids!==null?options.ids.lenth : 0); - var i,index,id,row; - for(i=0; i<count; i++) { - index = options.indexes!==null ? options.indexes[i] : null; - id = options.ids!==null ? options.ids[i] : null; - row = null; - - if(index!==null) { - if(this.dataViewHash) { - row = this.dataViewHash[index]; - } - if(!row) { - row = this.dataView.findAll(function(item){return item && item.rowindex==index;}); - row = row && row.length && row.length>0 ? row[0] : null; - } - } - if(row===null && id!==null){ - var rowEl = document.getElementById(id); - if(rowEl!==null) { - index = rowEl.length ? rowEl[0].rowindex : rowEl.rowindex; - row = this.dataView.findAll(function(item){return item && item.rowindex==index;}); - } - } - if(row) { - row.showNormal(); - } - } - - // This trick to force IE rerender rows - if(ClientUILib.isIE && !ClientUILib.isIE7) { - this.setScrollPos(this.currentPos); - this.adjustScrollPosition(this.grid.getColumnScrollX()); - } - } + this.dataView.each(function(row) { + row.show(); + }); + } }); Added: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js (rev 0) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js 2007-05-07 18:41:24 UTC (rev 682) @@ -0,0 +1,639 @@ +/* + * TODO: Copyright (c) 2007 Denis Morozov <dmorozov(a)exadel.com&gt; + * + * ... + */ +ClientUILib.declarePackage("ClientUI.controls.grid.GridBody2"); + +ClientUILib.requireClass("ClientUI.common.box.Box"); + +/* + * GridHeader.js - Grid control header pane + * TODO: add comments + */ +ClientUI.controls.grid.GridBody2 = Class.create({ + CLASSDEF: { + name: 'ClientUI.controls.grid.GridBody2', + parent: ClientUI.common.box.Box + } + +}); + +Object.extend(ClientUI.controls.grid.GridBody2.prototype, { + /** + * Count of rows can be viewed in the same time in grid + */ + dataVisible: 50, + + /** + * Count of rows loaded additianally to dataVisible rows + */ + dataDelta: 5, + + /** + * Contains loaded data + */ + dataView: [], + + /** + * Pool for rows. Targeted to improve perfomance + */ + rowsPool: [], + + /** + * Current data position + */ + currentPos: 0, + + /** + * Constructor + * @param {Object} template for Grid body row + * @param {Object} grid parent grid object + */ + initialize: function(template, grid) { + this.grid = grid; + ClientUI.controls.grid.GridBody2.parentClass.constructor().call(this, null, grid.getElement()); + this.element.id = this.grid.getElement().id + "_Body"; + + // declare event listeners + this._eventOnHScroll = this._onContentHScroll.bind(this); + this._eventOnVScroll = this._onContentVScroll.bind(this); + this._eventOnDataReady = this._onDataReady.bind(this); + + this.createControl(template); + this.registerEvents(); + this.updateLayout(); + }, + // event listeners + _onContentHScroll: function(xpos) { + this.grid.adjustScrollPosition(xpos); + }, + _onContentVScroll: function(ypos) { + this.helpObject1.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); + this.helpObject2.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); + this.setScrollPos(ypos); + this.adjustDataPosition(ypos); + }, + _onDataReady: function(options) { + // load rows data + var currTime = (new Date()).getTime(); + + var loadRow = this.loadRow.bind(this); + var byIndex = options.indexes!==null; + var count = options.indexes!==null ? options.indexes.length : (options.ids!==null?options.ids.lenth : 0); + for(var i=0; i<count; i++) { + loadRow( + options.indexes!==null ? options.indexes[i] : null, + options.ids!==null ? options.ids[i] : null); + } + + // This trick to force IE rerender rows + if(ClientUILib.isIE && !ClientUILib.isIE7) { + this.setScrollPos(this.currentPos); + this.adjustScrollPosition(this.grid.getColumnScrollX()); + } + + ClientUILib.log(ClientUILogger.WARNING, "data for "+count+" rows loaded over: " + ((new Date()).getTime() - currTime) + " miliseconds."); + ClientUILib.log(ClientUILogger.WARNING, "load data delta time: " + (this.taskStartTime - this.taskDefineTime)); + ClientUILib.log(ClientUILogger.WARNING, "data prepare time: " + (this.taskStartLoadingTime - this.taskStartTime)); + ClientUILib.log(ClientUILogger.INFO, "Load data indexes: " + options.ids.inspect()); + }, + registerEvents: function() { + Event.observe(this.scrollBox.eventHScroll, "grid body hscroll", this._eventOnHScroll); + Event.observe(this.scrollBox.eventVScroll, "grid body vscroll", this._eventOnVScroll); + Event.observe(this.grid.dataModel.eventDataReady, "grid data is loaded", this._eventOnDataReady); + }, + destroy: function() { + Event.stopObserving(this.scrollBox.eventHScroll, "grid body hscroll", this._eventOnHScroll); + Event.stopObserving(this.scrollBox.eventVScroll, "grid body vscroll", this._eventOnVScroll); + Event.stopObserving(this.grid.dataModel.eventDataReady, "grid data is loaded", this._eventOnDataReady); + }, + createControl: function(template) { + // validate template + template.parentNode.removeChild(template); + + // create scroll box + this.scrollBox = new ClientUI.common.box.ScrollableBox(null, this.getElement()); + this.scrollBox.makeAbsolute(); + this.sizeBox = new ClientUI.common.box.Box(null, this.scrollBox.getElement()); + this.sizeBox.makeAbsolute(); + + var normal = null, frozen = null; + var childs = $(template).childNodes; + for(var i=0; i<childs.length; i++) { + if(childs[i].id && childs[i].id == "FrozenBox") { + frozen = childs[i]; + } + else if(childs[i].id && childs[i].id == "NormalBox"){ + normal = childs[i]; + } + } + + if(normal) { + this.contentBox = new ClientUI.common.box.Box(normal); + this.contentBox.setParent(this.getElement()); + this.contentBox.makeAbsolute(); + } + if(frozen) { + this.frozenContentBox = new ClientUI.common.box.Box(frozen); + this.frozenContentBox.setParent(this.getElement()); + this.frozenContentBox.makeAbsolute(); + } + + this.helpObject1 = new ClientUI.common.box.Box($(document.createElement("img")), this.contentBox.getElement()); + this.helpObject1.setWidth(10); + this.helpObject1.setHeight(10); + this.helpObject1.makeAbsolute(); + this.helpObject2 = new ClientUI.common.box.Box($(document.createElement("img")), this.frozenContentBox.getElement()); + this.helpObject2.setWidth(10); + this.helpObject2.setHeight(10); + this.helpObject2.makeAbsolute(); + + // create row template + var ch = this.contentBox.getElement().firstChild; + while(ch) { + if(ch.tagName && ch.tagName.toLowerCase()=="table") { + this.templNormal = new ClientUI.common.box.Box($(ch), null, true); + break; + } + ch = ch.nextSibling; + } + ch = this.frozenContentBox.getElement().firstChild; + while(ch) { + if(ch.tagName && ch.tagName.toLowerCase()=="table") { + this.templFrozen = new ClientUI.common.box.Box($(ch), null, true); + break; + } + ch = ch.nextSibling; + } + this.parseTemplate(this.templFrozen.getElement(), this.templNormal.getElement()); + this.updateColumns(); + + // control created + this.controlCreated = true; + }, + parseTemplate: function(templFrozen, templNormal) { + if(!templNormal || !templNormal.rows || templNormal.rows.length===0) { + return false; + } + + this.rowsCount = templNormal.rows.length; + this.defaultRowHeight = Element.getHeight(templNormal.rows[0].cells[0]); + if(ClientUILib.isGecko) { + this.defaultRowHeight -= this.getBorderWidth("tb") + this.getPadding("tb"); + } + return true; + }, + updateColumns: function() { + var width = 0; + var columns = this.grid.getHeader().getColumns(); + for(var i=0; i<columns.lenght; i++) { + width = columns[i].width; + if(ClientUILib.isGecko) { + width -= this.getBorderWidth("lr") + this.getPadding("lr"); + } + this.adjustColumnWidth(i, width); + } + }, + adjustColumnWidth: function(column, width) { + // TODO: implement adjustColumnWidth!!! + }, + getColumns: function() { + return this._columns; + }, + setScrollPos: function(pos) { + this.contentBox.getElement().scrollTop = pos; + this.frozenContentBox.getElement().scrollTop = pos; + if(ClientUILib.isIE && !ClientUILib.isIE7) { + this.contentBox.getElement().scrollTop = pos; + this.frozenContentBox.getElement().scrollTop = pos; + } + }, + updateLayout: function() { + if(!this.controlCreated || !this.grid.controlCreated) { + return; + } + ClientUI.controls.grid.GridBody2.parentClass.method("updateLayout").call(this); + if(!this.scrollBox || !this.contentBox || !this.sizeBox) { + return; + } + + var scrollLeft = this.contentBox.getElement().scrollLeft; + var height = this.scrollBox.getViewportHeight(); + var fixH = this.grid.getFooter() ? this.grid.getFooter().getHeight() : 0; + if(fixH > height) fixH = 0; + var totalWidth = this.grid.getColumnsTotalWidth(); + var frozenContentWidth = this.grid.getColumnsFrozenWidth(); + + this.scrollBox.moveTo(0, 0); + this.sizeBox.moveTo(0, 0); + this.frozenContentBox.moveTo(0, 0); + this.contentBox.moveTo(frozenContentWidth, 0); + + this.sizeBox.setWidth(totalWidth); + this.sizeBox.setHeight(this.defaultRowHeight * this.grid.dataModel.getCount() + fixH); + this.helpObject1.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); + this.helpObject2.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); + + // NOTE: this needed to force this.scrollBox update scrolled area + this.scrollBox.setWidth(this.getWidth()+1); + this.scrollBox.setHeight(this.getHeight()+1); + this.scrollBox.setWidth(this.getWidth()); + this.scrollBox.setHeight(this.getHeight()); + + this.contentBox.setWidth(this.scrollBox.getViewportWidth()-frozenContentWidth); + this.contentBox.setHeight(height - fixH); + this.frozenContentBox.setWidth(frozenContentWidth); + this.frozenContentBox.setHeight(height - fixH); + + var scrollPos = Math.min(totalWidth - frozenContentWidth - this.contentBox.getWidth(), scrollLeft); + this.grid.adjustScrollPosition(scrollPos); + + this.dataVisible = parseInt(this.contentBox.getHeight() / this.defaultRowHeight, 10) + 1; + if(height > 0) { + this.adjustDataPosition(this.currentPos); + } + }, + adjustScrollPosition: function(pos) { + this.contentBox.getElement().scrollLeft = pos; + }, + getScrollXPosition: function() { + return this.contentBox.getElement().scrollLeft; + }, + getScrollYPosition: function() { + return this.contentBox.getElement().scrollTop; + }, + _getRowDesc: function(parent, idPrefix, headerRow, headerFrozenRow) { + var rowDesc = { + id: headerRow.getElement().id, + idprefix: idPrefix, + parent: parent, + frozen: headerFrozenRow, + normal: headerRow, + moveToY: function(y) { + this.frozen.moveToY(y); + this.normal.moveToY(y); + }, + getId: function() { + return this.id; + }, + getIdForCell: function(row, column) { + return "c_"+ row +"_" + column; + }, + setId: function(id) { + this.id = id; + this.frozen.getElement().id = id; + this.normal.getElement().id = id; + + var cellObj, cB; + var i, index = 0; + var cnt = this.frozen.getElement().childNodes.length; + for(i=0; i<cnt; i++) { + cellObj = this.frozen.getElement().childNodes[i]; + cellObj.id = this.getIdForCell(this.rowindex, index++); + cellObj.childNodes[0].id = "b"+ cellObj.id; + + } + cnt = this.normal.getElement().childNodes.length; + for(i=0; i<cnt; i++) { + cellObj = this.normal.getElement().childNodes[i]; + cellObj.id = this.getIdForCell(this.rowindex, index++); + cellObj.childNodes[0].id = "b"+ cellObj.id; + } + }, + setRowIndex: function(index) { + this.rowindex = index; + this.frozen.getElement().rowindex = index; + this.normal.getElement().rowindex = index; + this.setId(this.idprefix + this.rowindex); + }, + setRowClass: function(isOdd) { + if(isOdd) { + this.frozen.getElement().removeClassName("ClientUI_Grid_BREven"); + this.normal.getElement().removeClassName("ClientUI_Grid_BREven"); + this.frozen.getElement().addClassName("ClientUI_Grid_BROdd"); + this.normal.getElement().addClassName("ClientUI_Grid_BROdd"); + } + else { + this.frozen.getElement().removeClassName("ClientUI_Grid_BROdd"); + this.normal.getElement().removeClassName("ClientUI_Grid_BROdd"); + this.frozen.getElement().addClassName("ClientUI_Grid_BREven"); + this.normal.getElement().addClassName("ClientUI_Grid_BREven"); + } + }, + setCellValue: function(index, newValue) { + var i = index; + var cnt1 = this.frozen.getElement().childNodes.length; + if(i < cnt1) { + var cellObj = this.frozen.getElement().childNodes[i]; + Element.update(cellObj.firstChild, newValue); + return true; + } + i -= cnt1; + var cellObj = this.normal.getElement().childNodes[i]; + Element.update(cellObj.firstChild, newValue); + return true; + }, + show: function() { + this.frozen.show(); + this.normal.show(); + }, + showWaitData: function(show) { + // process frozen + var cells = this.frozen.getElement().childNodes; + var i = 0, startIndex = 0; + if(this.parent.grid.options.showIndexColumn) { + startIndex = 1; + this.setCellValue(0, ""+this.rowindex); + } + var method = !show ? Element.show : Element.hide; + for(i=startIndex;i<cells.length; i++) { + method(cells[i]); + } + + //process normal + cells = this.normal.getElement().childNodes; + for(i=0;i<cells.length; i++) { + method(cells[i]); + } + }, + hide: function() { + this.frozen.hide(); + this.normal.hide(); + }, + showEmpty: function() { + this.moveToY(this.parent.defaultRowHeight * this.rowindex); + this.setRowClass(this.rowindex%2 ? false : true); + //this.show(); + //this.showWaitData(true); + }, + showNormal: function() { + this.show(); + this.showWaitData(false); + }, + loadRowData: function(row, index, rowData) { + + // replace data patterns in content with real data from row + var count = this.parent.grid.getHeader().getColumns().length; + var columns = this.parent.getColumns(); + var i = this.parent.grid.options.showIndexColumn ? 1 : 0; + for(; i<count; i++) { + var value = this.parent.parseExpression(columns[i].value, rowData, { + row: index, + cid: row.getId() + ":" + i, + rid: row.getId() + }); + this.setCellValue(i, value); + } + + this.showNormal(); + return true; + }, + getCellsToUpdate: function() { + var count = this.parent.grid.getHeader().getColumns().length; + var ids = []; + for(var i=0; i<count; i++) + ids.push("b"+ this.getIdForCell(this.rowindex, i)); + return ids; + } + }; + + return rowDesc; + }, + createRow: function() { + var row = null; + var rowFrozen = null; + if(this.templateRow) { // use existing template to inherit cell's width & offset + row = this.templateRow.normal.getElement().cloneNode(true); + rowFrozen = this.templateRow.frozen.getElement().cloneNode(true); + } + else { // first time + row = this.headerRowTemplate.getElement().cloneNode(true); + rowFrozen = this.headerFrozenRowTemplate.getElement().cloneNode(true); + } + + var headerRow = new ClientUI.common.box.InlineBox(row, this.contentBox.getElement(), true); + headerRow.setParent(this.contentBox.getElement()); + var headerFrozenRow = new ClientUI.common.box.InlineBox(rowFrozen, this.frozenContentBox.getElement(), true); + headerFrozenRow.setParent(this.frozenContentBox.getElement()); + + var rowDesc = this._getRowDesc(this, this.getElement().id + "BR", headerRow, headerFrozenRow); + + // create sample row that will be cloned + if(!this.templateRow) { + this.templateRow = rowDesc; + this.templateRow.setId("trow"); + this.grid._parseRowAndAddToStrips(this.templateRow.id, this.templateRow); + this.templateRow.setRowIndex(-100); + this.templateRow.showEmpty(); + this.templateRow.hide(); + } + + this.grid._parseRowAndAddToStrips("" + (this.grid._getParsedRowsCount()+1), rowDesc); + return rowDesc; + }, + /** + * Parse values of cell's value and title + * Predefined patterns: + * - $(row) Index of current row + * - $(cid) Cell's DOM id + * - $(rid) Row's DOM id + * - $(N) Row Data index + * @param {Object} expr Value to parse. Can be defined over expression in next manner: "$(index_0) and $(index_4) will be over $(index_2) higher!". Where 1,5,3 - indexes in <code>data</code> array param. + * @param {Object} data Data to replace within expression. + */ + parseExpression: function(expr, data, params) { + var pattern = /\$\(row\)/i; + var rez = expr.gsub(pattern, function(item) { + return params.row; + }); + pattern = /\$\(cid\)/i; + rez = rez.gsub(pattern, function(item) { + return params.cid; + }) + pattern = /\$\(rid\)/i; + rez = rez.gsub(pattern, function(item) { + return params.rid; + }) + + pattern = /\$\((\d*)\)/i; + rez = rez.gsub(pattern, function(item) { + if(!item || !item[1]) { + return "!ERROR!"; + } + var index = parseFloat(item[1]); + return data.length > index ? data[index] : "!ERROR!"; + }); + + return rez; + }, + loadRow: function(index, id) { + var row = null; + if(this.dataViewHash) { + row = this.dataViewHash[index]; + } + if(row) { + var rowData = this.grid.dataModel.getRow(index); + if(rowData && rowData.length && rowData.length > 0) { + row.loadRowData(row, index, rowData); + } + } + }, + getRow: function() { + return this.rowsPool.length>0 ? this.rowsPool.pop() : this.createRow(); + }, + deleteRow: function(row) { + row.hide(); + row.rowindex = -1; + this.rowsPool.push(row); + }, + adjustDataPosition: function (pos) { + + // 1. calculate direction and range to load next data + var forwardDir = this.currentPos <= pos; + this.currentPos = pos; + + // first visible row index + var first = parseInt(pos / this.defaultRowHeight) - 1; + if(first < 0) first = 0; + + // TODO: check direction and predict some next rows + var from = Math.max(first - this.dataDelta, 0); + var to = Math.min(first + this.dataVisible+this.dataDelta, this.grid.dataModel.getCount()); + var range = $R(from, to); + + if(from >= to) { + ClientUILib.log(ClientUILogger.WARNING, "!!! GridBody: adjustDataPosition. Pos: " + pos + ", From:" + from + ", To:" + to); + return; + } + + // stop timed adjusting + var task = this._getPendingTask(); + clearTimeout(task.timer); + if(to - from > 0) { + task.timer = null; + task.from = from; + task.to = to; + this._setPendingTask(task); + } + }, + _getPendingTask: function() { + if(!this.pendingTask) { + this.pendingTask = { + timer: null, + rowsToLoad: [], + rowsToLoadIdx: [], + from: 0, + to: 0 + }; + } + return this.pendingTask; + }, + _setPendingTask: function(task) { + // and plan other agjusting over the time + this.taskDefineTime = (new Date()).getTime(); + task.timer = setTimeout(function() { + this.taskStartTime = (new Date()).getTime(); + + // 1. get previous range + if(!this.currRange) { + this.currRange = $R(-this.rowsCount,-1); + } + + var range = $R(task.from, task.to); + + // if we have intersepted ranges than rearrange rows + // in other case just move rows table to first position + var switchRows = true; + if(this.currRange.end < range.start + || this.currRange.start > range.end) { + switchRows = false; + } + + if(!switchRows) { + this.prepareRows(0, range.end - range.start); + var pos = this.defaultRowHeight * range.start; + this.templFrozen.moveToY(pos); + this.templNormal.moveToY(pos); + } + else { + var rowsNeededCount = 0; + if(range.start > this.currRange.start + && range.start < this.currRange.end) { + // TODO: get rows from this.currRange.start to range.start + // and move them to end of table + // then move table to correct position + } + else { + // TODO: get rows from range.end to this.currRange.end + // and move them to begin of table + // then move table to correct position + } + } + + /* + // 1. hide invisible rows + this.dataViewHash = []; + var newDataView = []; + var count = this.dataView.length; + for(var i=0; i<count; i++) { + var row = this.dataView[i]; + if(!range.include(row.rowindex)) { + this.deleteRow(row); + } + else { + this.dataViewHash[row.rowindex] = this.dataView[i]; + newDataView.push(row); + } + } + this.dataView = newDataView; + + // 2. show empty rows + var rowsToLoad = []; + var rowsToLoadIdx = []; + var row, i; + for(i=task.from; i<=task.to; i++) { + if(!this.dataViewHash[i]) { + row = this.getRow(); + row.setRowIndex(i); + row.showEmpty(); + this.dataView.push(row); + this.dataViewHash[i] = row; + rowsToLoadIdx.push(i); + rowsToLoad.push(row.getCellsToUpdate()); + } + } + + this.taskStartLoadingTime = (new Date()).getTime(); + // 4. start data loading + this.grid.dataModel.loadRows({ + indexes: rowsToLoadIdx, + ids: rowsToLoad}); + */ + + clearTimeout(task.timer); + task.timer = null; + task.from = 0; + task.to = 0; + this.currRange = range; + + }.bind(this), this.grid.dataModel.getRequestDelay()); + + this.pendingTask = task; + }, + invalidate: function(options) { + this.dataView.each(function(row) { + row.show(); + }); + }, + + /** + * prepare rows for data reload + * i.e. hide and set new ids for content elements + */ + prepareRows: function(start, end, startIndex) { + // this.rowsCount + //this.templFrozen.moveToY(pos); + //this.templNormal.moveToY(pos); + } +}); Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter.js 2007-05-07 18:36:19 UTC (rev 681) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter.js 2007-05-07 18:41:24 UTC (rev 682) @@ -97,7 +97,7 @@ var i = 0; if(this.grid.options.showIndexColumn) { columns[i++] = { - innerHTML: "&nbsp;", + innerHTML: " ", styleClass: "", id: "", align: "", Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js 2007-05-07 18:36:19 UTC (rev 681) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js 2007-05-07 18:41:24 UTC (rev 682) @@ -57,7 +57,7 @@ } template.parentNode.removeChild(template); - document.body.appendChild(template); + document.body.appendChild(this.template); var errMsg = ""; if(!this.template) { @@ -80,7 +80,7 @@ this.generateDOMTree(); // Remove template - document.body.removeChild(template); + document.body.removeChild(this.template); // Set dimensions this.setHeight(this.defaultHeight); @@ -100,7 +100,7 @@ if(this.grid.options.showIndexColumn) { columns[i++] = { width: this.grid.options.indexColumnWidth, - innerHTML: "&nbsp;", + innerHTML: " ", styleClass: "", id: "", align: "", @@ -118,7 +118,7 @@ var cells = $A(template.rows[0].cells); cells.each(function(cell) { columns[i++] = { - width: Element.getWidth(cell), + width: parseInt(cell.width),/*Element.getWidth(cell),*/ innerHTML: cell.innerHTML, styleClass: cell.className, id: cell.id, @@ -222,7 +222,9 @@ sb.append(columnDesc.innerHTML); } sb.append('</span></td><td><span class="sort-desc"></span><span class="sort-asc"></span></td></tr></tbody></table>'); - colBody.getElement().update(sb.toString()); + + var cellContent = sb.toString(); + colBody.getElement().update(cellContent); colBody.moveTo(0, 0); var bodyWidth = width; var bodyHeight = height;