Author: abelevich Date: 2007-05-18 06:21:22 -0400 (Fri, 18 May 2007) New Revision: 800 Removed: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/CellsStrip.js Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter2.js trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader2.js Log: Deleted: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/CellsStrip.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/CellsStrip.js 2007-05-17 18:50:09 UTC (rev 799) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/CellsStrip.js 2007-05-18 10:21:22 UTC (rev 800) @@ -1,126 +0,0 @@ -/** - * CellsStrip.js Date created: 6.04.2007 - * Copyright (c) 2007 Exadel Inc. - * @author Denis Morozov <dmorozov(a)exadel.com&gt; - */ -ClientUILib.declarePackage("ClientUI.controls.grid.CellsStrip"); - -ClientUI.controls.grid.CellsStrip = Class.create({ - CLASSDEF: { - name: 'ClientUI.controls.grid.CellsStrip' - } - -}); - -Object.extend(ClientUI.controls.grid.CellsStrip.prototype, { - columnWidth: 0, - basePos: 0, - currOffset: 0, - - initialize: function(options) { - this._hash = []; - this.columnWidth = 0; - this.basePos = 0; - - if(options) { - Object.extend(this, options); - } - }, - - length: function() { - return this._hash.length; - }, - - add: function(key, value) { - value.key = key; - this._hash.push(value); - }, - - remove: function(key) { - var count = this._hash.length; - for(var i=0; i<count; i++) { - if(this._hash[i].key == key) { - this._hash.slice(i, i); - break; - } - } - }, - - // set cells offset - setOffset: function(offset, updateBasePos, silent) { - if(!silent) { - var basePos = this.basePos; - this._hash.each(function(item){ - item.setOffset(basePos + offset); - }); - } - - this.currOffset = offset; - if(updateBasePos) { - this.basePos += offset; - this.currOffset = 0; - } - }, - // set cells width - setWidth: function(newWidth, silent) { - if(!silent) { - this._hash.each(function(item){ - item.setWidth(newWidth); - }); - } - this.columnWidth = newWidth; - }, - - getWidth: function() { - return this.columnWidth; - }, - - getOffset: function() { - return this.currOffset; - } -}); - -ClientUI.controls.grid.ColumnCell = Class.create({ - CLASSDEF: { - name: 'ClientUI.controls.grid.ColumnCell' - }, - initialize: function(cellObj, parentStrip) { - this.cellObj = new ClientUI.common.box.Box(cellObj, null, true); - this.parentStrip = parentStrip; - }, - - // shift column cell in horizontal - setOffset: function(offset, updateBasePos) { - var newOffset = offset; - if(this.separator) { - newOffset += this.parentStrip.getWidth() - this.cellObj.getWidth()/2 - 1; - } - this.cellObj.moveToX(newOffset); - }, - - // set column width - setWidth: function(newWidth) { - if(!this.separator) { - this.cellObj.setWidth(newWidth); - if(this.cellObj.getElement().childNodes.length > 0) { - var childs = $A(this.cellObj.getElement().childNodes); - - var fixedWidth = newWidth; - if(ClientUILib.isGecko) { - var oldElement = this.cellObj.getElement(); - var i = 0; - while(i<childs.length && !childs[i].tagName) i++; - if(i<childs.length) { - this.cellObj.element = childs[i]; - fixedWidth -= this.cellObj.getBorderWidth("lr") + this.cellObj.getPadding("lr"); - $(childs[i]).setStyle({width: fixedWidth + "px"}); - } - this.cellObj.element = oldElement; - } - } - } - else { - this.setOffset(this.parentStrip.basePos + (newWidth - this.parentStrip.getWidth())); - } - } -}); Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js 2007-05-17 18:50:09 UTC (rev 799) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js 2007-05-18 10:21:22 UTC (rev 800) @@ -9,7 +9,6 @@ ClientUILib.requireClass("ClientUI.controls.grid.GridHeader"); ClientUILib.requireClass("ClientUI.controls.grid.GridBody"); ClientUILib.requireClass("ClientUI.controls.grid.GridFooter"); -ClientUILib.requireClass("ClientUI.controls.grid.CellsStrip"); /* * grid.js - Grid library on top of Prototype @@ -44,6 +43,10 @@ * Occured when content header clicked */ eventOnSort: {}, + /** + * Occured when column width adjusted + */ + eventOnResizeColumn: {}, initialize: function(element, dataModel, templates) { ClientUI.controls.grid.Grid.parentClass.constructor().call(this, element); @@ -54,6 +57,7 @@ this.templates = $A(templates); this.eventOnSort = new ClientUI.common.utils.CustomEvent('OnSort'); + this.eventOnResizeColumn = new ClientUI.common.utils.CustomEvent('OnResizeColumn'); this.createControl(); }, @@ -138,7 +142,8 @@ this.getHeader().adjustColumnWidth(index, width); this.getBody().adjustColumnWidth(index, width); this.getFooter().adjustColumnWidth(index, width); - this.updateLayout(); + this.updateLayout(); + this.eventOnResizeColumn.fire(index, width); }, adjustScrollPosition: function(pos) { if(pos<0) {pos = 0;} @@ -147,26 +152,15 @@ this.getBody().adjustScrollPosition(pos); if(this.getFooter()) {this.getFooter().adjustScrollPosition(pos);} }, - loadData: function() { - this.getBody().adjustDataPosition(0); + getScrollOffset: function() { + return this.currentScrollPos; }, - 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"; - }, getColumnsTotalWidth: function() { var totalWidth = 0; var columns = this.getHeader().getColumns(); @@ -176,20 +170,22 @@ return totalWidth; }, getColumnsFrozenWidth: function() { - /*var totalWidth = 0; + var totalWidth = 0; var columns = this.getHeader().getColumns(); var i = 0; while(i<columns.length && columns[i].frozen) { totalWidth += columns[i++].width; } - return totalWidth;*/ - return this.getBody().frozenContentBox.getWidth(); + return totalWidth; }, invalidate: function(params) { this.getBody().invalidate(params); }, - test: function() { - this.getBody().test(); + adjustColumnsWidth: function() { + var columns = this.getHeader().getColumns(); + for(var i=0; i<columns.length; i++) { + this.adjustColumnWidth(i, columns[i].width); + } } }) Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js 2007-05-17 18:50:09 UTC (rev 799) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js 2007-05-18 10:21:22 UTC (rev 800) @@ -29,18 +29,8 @@ * 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, @@ -63,16 +53,22 @@ this.registerEvents(); this.updateLayout(); }, + 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); + + this._eventOnStartLoadData = this.startLoadData.bindAsEventListener(this); + }, + 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); + }, // 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(); @@ -97,16 +93,12 @@ ClientUILib.log(ClientUILogger.WARNING, "load data delta time: " + (this.taskStartTime - this.taskDefineTime)); ClientUILib.log(ClientUILogger.WARNING, "data prepare time: " + (this.taskStartLoadingTime - this.taskStartTime)); }, - 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); + _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); }, - 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) { var childs = template.childNodes; @@ -128,10 +120,10 @@ var normal = null, frozen = null; var childs = this.container.getElement().childNodes; for(var i=0; i<childs.length; i++) { - if(childs[i].id && childs[i].id == "FrozenBox") { + if(childs[i].id && childs[i].id.indexOf("FrozenBox")>=0) { frozen = childs[i]; } - else if(childs[i].id && childs[i].id == "NormalBox"){ + else if(childs[i].id && childs[i].id.indexOf("NormalBox")>=0){ normal = childs[i]; } } @@ -146,7 +138,7 @@ this.frozenContentBox = new ClientUI.common.box.Box(frozen); this.frozenContentBox.makeAbsolute(); - /* + this.helpObject1 = new ClientUI.common.box.Box($(document.createElement("img")), this.contentBox.getElement()); this.helpObject1.setWidth(10); this.helpObject1.setHeight(10); @@ -155,13 +147,14 @@ this.helpObject2.setWidth(10); this.helpObject2.setHeight(10); this.helpObject2.makeAbsolute(); - */ + // create row template var ch = this.frozenContentBox.getElement().firstChild; while(ch) { if(ch.tagName && ch.tagName.toLowerCase()=="table") { this.templFrozen = new ClientUI.common.box.Box($(ch), null, true); + this.templFrozen.makeAbsolute(); break; } ch = ch.nextSibling; @@ -170,6 +163,7 @@ while(ch) { if(ch.tagName && ch.tagName.toLowerCase()=="table") { this.templNormal = new ClientUI.common.box.Box($(ch), null, true); + this.templNormal.makeAbsolute(); break; } ch = ch.nextSibling; @@ -200,9 +194,6 @@ return true; }, - getColumns: function() { - return this._columns; - }, setScrollPos: function(pos) { this.contentBox.getElement().scrollTop = pos; this.frozenContentBox.getElement().scrollTop = pos; @@ -219,30 +210,29 @@ if(!this.scrollBox || !this.contentBox || !this.sizeBox) { return; } + + var totalWidth = this.grid.getColumnsTotalWidth(); + this.scrollBox.moveTo(0, 0); + this.scrollBox.setWidth(this.getWidth()+1); + this.scrollBox.setHeight(this.getHeight()+1); + this.scrollBox.setWidth(this.getWidth()); + this.scrollBox.setHeight(this.getHeight()); 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.moveTo(0, 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.helpObject1.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); + this.helpObject2.moveToY(this.sizeBox.getHeight()+ this.defaultRowHeight + 5); + this.container.setWidth(totalWidth + 100); this.contentBox.setWidth(this.scrollBox.getViewportWidth()-frozenContentWidth); this.contentBox.setHeight(height - fixH); @@ -251,8 +241,10 @@ var scrollPos = Math.min(totalWidth - frozenContentWidth - this.contentBox.getWidth(), scrollLeft); this.grid.adjustScrollPosition(scrollPos); - + this.dataVisible = parseInt(this.contentBox.getHeight() / this.defaultRowHeight, 10) + 1; + this.dataVisible = Math.min(this.dataVisible, this.rowsCount); + //this.dataVisible = this.rowsCount; if(height > 0) { this.adjustDataPosition(this.currentPos); } @@ -266,182 +258,13 @@ 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; - 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(); - for(var i = 0; 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; - }, - /** - * 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; - }, - deleteRow: function(row) { - row.hide(); - row.rowindex = -1; - this.rowsPool.push(row); - }, adjustDataPosition: function (pos) { + if(this.currentPos == pos) { + return; + } // 1. calculate direction and range to load next data - var forwardDir = this.currentPos <= pos; + var forwardDir = (this.currentPos <= pos) ? true : false; this.currentPos = pos; // first visible row index @@ -449,8 +272,8 @@ 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 from = Math.max(first - (forwardDir ? 1 : (this.rowsCount - this.dataVisible - 1)), 0); + var to = Math.min(first + (forwardDir ? this.rowsCount-1 : this.dataVisible + 1), this.grid.dataModel.getCount()); var range = $R(from, to); if(from >= to) { @@ -459,8 +282,7 @@ } // stop timed adjusting - var task = this._getPendingTask(); - clearTimeout(task.timer); + var task = this._getPendingTask(); if(to - from > 0) { task.timer = null; task.from = from; @@ -478,14 +300,64 @@ to: 0 }; } + else { + if(this.pendingTask.timer) { + clearTimeout(this.pendingTask.timer); + this.pendingTask.timer = null; + } + + } return this.pendingTask; }, - _setPendingTask: function(task) { + _setPendingTask: function(task) { + this.pendingTask = task; + // and plan other agjusting over the time + if(!this.startObserving) { + this.startObserving = true; + + Event.observe(document, 'mousemove', this._eventOnStartLoadData); + Event.observe(document, 'mouseup', this._eventOnStartLoadData); + Event.observe(this.scrollBox.getElement(), 'mouseup', this._eventOnStartLoadData); + } + }, + adjustColumnWidth: function(column, width) { + var frozenColumns = this.grid.getHeader().headerFrozenRow.getElement().rows[0].cells.length; + var realColumn = column; + var table = null; + if(column < frozenColumns) { + table = this.frozenContentBox.getElement(); + } + else { + table = this.contentBox.getElement(); + realColumn -= frozenColumns; + } + + var helpObj = this.helpObj; + var id = "bc_" + column; + var spans = $A(table.getElementsByTagName("span")); + spans.each(function(cell) { + if(cell.id.indexOf(id)>=0) { + helpObj.element = $(cell); + helpObj.setWidth(width); + } + }); + }, + startLoadData: function() { + if(this.startObserving) { + this.startObserving = false; + Event.stopObserving(document, 'mousemove', this._eventOnStartLoadData); + Event.stopObserving(document, 'mouseup', this._eventOnStartLoadData); + Event.stopObserving(this.scrollBox.getElement(), 'mouseup', this._eventOnStartLoadData); + } + this.taskDefineTime = (new Date()).getTime(); + var task = this._getPendingTask(); + // Make timer to handle quick clicks on scrollbar arrows task.timer = setTimeout(function() { this.taskStartTime = (new Date()).getTime(); - + + var task = this._getPendingTask(); var range = $R(task.from, task.to); // if we have intersepted ranges than rearrange rows @@ -495,12 +367,11 @@ || this.currRange.start > range.end) { switchRows = false; } - - this.startIndex = range.start; - this.countToLoad = range.end - range.start; - + if(!switchRows) { this.startRow = this.templFrozen.getElement().rows[0].index; + this.startIndex = range.start; + this.countToLoad = range.end - range.start; this.prepareRows(0, range.end - range.start); var pos = this.defaultRowHeight * range.start; @@ -514,9 +385,10 @@ var normalTbl = this.templNormal.getElement(); if(range.start > this.currRange.start && range.start < this.currRange.end) { - + this.countToLoad = range.start - this.currRange.start; this.startRow = frozenTbl.rows[0].index; + this.startIndex = range.start + this.countToLoad; // store visible row pos to restore after rows reerrange var visibleRowPos = this.templFrozen.getY() + this.countToLoad * this.defaultRowHeight; @@ -524,61 +396,80 @@ for(i=0; i<this.countToLoad; i++) { row = frozenTbl.rows[0]; cloned = row.cloneNode(true); + cloned.index = row.index; frozenTbl.deleteRow(row.rowIndex); - rownew = frozenTbl.insertRow(this.rowsCount-1); + rownew = frozenTbl.insertRow(-1); rownew.parentNode.replaceChild(cloned,rownew); row = normalTbl.rows[0]; cloned = row.cloneNode(true); + cloned.index = row.index; normalTbl.deleteRow(row.rowIndex); - rownew = normalTbl.insertRow(this.rowsCount-1); + rownew = normalTbl.insertRow(-1); rownew.parentNode.replaceChild(cloned,rownew); } this.templFrozen.moveToY(visibleRowPos); - this.templNormal.moveToY(visibleRowPos); -/* - // prepare array of column elements for sorting - var count = this.body.rows.length; - var elements = new Array(count); - for(var i=0; i<count; i++) { - var callbackProc = this.getSortFunction(nColumn); - elements[i] = { row: this.body.rows[i], element: this.body.rows[i].cells[nColumn], callback: callbackProc }; - } - - // sort - elements.sort(MyTableObject.defaultCompareCallback); - if (sortOrder == "descending")elements.reverse(); - - var nextSibling = this.body.nextSibling; - if (removeChilds) { // remove all rows - var p = this.body.parentNode; - p.removeChild(this.body); - } - - // insert in the new order - var l = elements.length; - for (var i = 0; i < l; i++) - this.body.appendChild(elements[i].row); - - if(removeChilds) - p.insertBefore(this.body, nextSibling); -*/ + this.templNormal.moveToY(visibleRowPos); } else { this.countToLoad = this.currRange.start - range.start; + this.startIndex = range.start; // store visible row pos to restore after rows reerrange var visibleRowPos = this.templFrozen.getY() - this.countToLoad * this.defaultRowHeight; - var frows = [], nrows = []; + + var count = frozenTbl.rows.length; + var frows = new Array(count), nrows = new Array(count); + var j = 0; + for(i=this.rowsCount - this.countToLoad; i<this.rowsCount; i++) { + frows[j] = frozenTbl.rows[i]; + nrows[j] = normalTbl.rows[i]; + j++; + } + for(i=0; i<this.rowsCount - this.countToLoad; i++) { + frows[j] = frozenTbl.rows[i]; + nrows[j] = normalTbl.rows[i]; + j++; + } + + // Mozilla is faster when doing the DOM manipulations on + // an orphaned element. MSIE is not + var removeChilds = navigator.product == "Gecko"; + var fbody = frozenTbl.tBodies[0]; + var nbody = normalTbl.tBodies[0]; + var fnextSibling = fbody.nextSibling; + var nnextSibling = nbody.nextSibling; + + if (removeChilds) { // remove all rows + fp = fbody.parentNode; + fp.removeChild(fbody); + np = nbody.parentNode; + np.removeChild(nbody); + } + + // insert in the new order + for (i = 0; i < count; i++) { + fbody.appendChild(frows[i]); + nbody.appendChild(nrows[i]); + } + + if(removeChilds) { + fp.insertBefore(fbody, fnextSibling); + np.insertBefore(nbody, nnextSibling); + } + + /* for(i=this.rowsCount-1; i>=this.rowsCount - this.countToLoad; i--) { row = frozenTbl.rows[i]; cloned = row.cloneNode(true); + cloned.index = row.index; frows.push(cloned); frozenTbl.deleteRow(row.rowIndex); row = normalTbl.rows[i]; cloned = row.cloneNode(true); + cloned.index = row.index; nrows.push(cloned); normalTbl.deleteRow(row.rowIndex); } @@ -591,14 +482,14 @@ row = nrows[i]; rownew = normalTbl.insertRow(0); rownew.parentNode.replaceChild(row, rownew); - } + }*/ this.templFrozen.moveToY(visibleRowPos); this.templNormal.moveToY(visibleRowPos); - this.startRow = frozenTbl.rows[0].index; + this.startRow = frozenTbl.rows[0].index; } } - + this.taskStartLoadingTime = (new Date()).getTime(); // 4. start data loading @@ -608,21 +499,17 @@ count: this.countToLoad, startRow: this.startRow}); } - - clearTimeout(task.timer); - task.timer = null; - task.from = 0; - task.to = 0; - this.currRange = range; - }.bind(this), this.grid.dataModel.getRequestDelay()); - - this.pendingTask = task; + this.currRange = range; + }.bind(this), 150/*this.grid.dataModel.getRequestDelay()*/); }, + + /** + * show hiden rows after loading them from datasource + * @param {Object} options + */ invalidate: function(options) { - this.dataView.each(function(row) { - row.show(); - }); + // TODO: implement invalidate for body !! }, /** @@ -633,27 +520,5 @@ // this.rowsCount //this.templFrozen.moveToY(pos); //this.templNormal.moveToY(pos); - }, - adjustColumnWidth: function(column, width) { - var frozenColumns = this.grid.getHeader().headerFrozenRow.getElement().rows[0].cells.length; - var realColumn = column; - var table = null; - if(column < frozenColumns) { - table = this.frozenContentBox.getElement(); - } - else { - table = this.contentBox.getElement(); - realColumn -= frozenColumns; - } - - var helpObj = this.helpObj; - var id = "bc_" + column; - var spans = $A(table.getElementsByTagName("span")); - spans.each(function(cell) { - if(cell.id == id) { - helpObj.element = $(cell); - helpObj.setWidth(width); - } - }); } }); Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter2.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter2.js 2007-05-17 18:50:09 UTC (rev 799) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter2.js 2007-05-18 10:21:22 UTC (rev 800) @@ -45,23 +45,6 @@ this.controlCreated = true; this.updateLayout(); }, - getRow: function() { - if(!this.footerRow) { - var rowDesc = { - id: "footer", - frozen: this.headerFrozenRow, - normal: this.headerRow, - moveToY: function(y) { - this.frozen.moveToY(y); - this.normal.moveToY(y); - } - }; - - this.footerRow = rowDesc; - } - - return this.footerRow; - }, parseTemplate: function(template) { if(!template) { return false; @@ -78,10 +61,10 @@ var normal = null, frozen = null; var childs = this.container.childNodes; for(var i=0; i<childs.length; i++) { - if(childs[i].id && childs[i].id == "FrozenBox") { + if(childs[i].id && childs[i].id.indexOf("FrozenBox")>=0) { frozen = childs[i]; } - else if(childs[i].id && childs[i].id == "NormalBox"){ + else if(childs[i].id && childs[i].id.indexOf("NormalBox")>=0){ normal = childs[i]; } } @@ -130,9 +113,6 @@ } return true; }, - getColumns: function() { - return this._columns; - }, updateLayout: function() { if(!this.controlCreated || !this.grid.controlCreated) { return; @@ -174,7 +154,7 @@ var id = "fc_" + column; var spans = $A(table.getElementsByTagName("span")); spans.each(function(cell) { - if(cell.id == id) { + if(cell.id.indexOf(id)>=0) { helpObj.element = $(cell); helpObj.setWidth(width); } Modified: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader2.js =================================================================== --- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader2.js 2007-05-17 18:50:09 UTC (rev 799) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader2.js 2007-05-18 10:21:22 UTC (rev 800) @@ -82,10 +82,10 @@ var normal = null, frozen = null; var childs = this.container.childNodes; for(var i=0; i<childs.length; i++) { - if(childs[i].id && childs[i].id == "FrozenBox") { + if(childs[i].id && childs[i].id.indexOf("FrozenBox")>=0) { frozen = childs[i]; } - else if(childs[i].id && childs[i].id == "NormalBox"){ + else if(childs[i].id && childs[i].id.indexOf("NormalBox")>=0){ normal = childs[i]; } } @@ -223,29 +223,11 @@ this._columns[i].sep.moveToX(offset - 4); } }, - getRow: function() { - if(!this.footerRow) { - var rowDesc = { - id: "header", - frozen: this.headerFrozenRow, - normal: this.headerRow, - moveToY: function(y) { - this.frozen.moveToY(y); - this.normal.moveToY(y); - } - }; - - this.footerRow = rowDesc; - } - - return this.footerRow; - }, updateLayout: function() { if(!this.controlCreated || !this.grid.controlCreated) { return; } ClientUI.controls.grid.GridHeader.parentClass.method("updateLayout").call(this); - var height = this.getViewportHeight(); var totalWidth = this.grid.getColumnsTotalWidth(); var frozenContentWidth = this.grid.getColumnsFrozenWidth(); @@ -316,7 +298,7 @@ var pos = this.dragColumnInfo.sep.getX(); if(!this.getColumns()[index].frozen) { - ;//pos += this.grid.getColumnsFrozenWidth(); + pos += this.grid.getColumnsFrozenWidth() - this.grid.getScrollOffset(); } this.dragColumnInfo.originalX = pos; this.columnSplitter.show(); @@ -428,6 +410,7 @@ }); } - this._columns[column].width = width; + this._columns[column].width = width; + this.agjustSeparators(); } });