Author: abelevich Date: 2007-06-01 11:00:26 -0400 (Fri, 01 Jun 2007) New Revision: 977 Modified: 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/GridBody2.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 trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader2.js Log: 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-06-01 15:00:11 UTC (rev 976) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid.js 2007-06-01 15:00:26 UTC (rev 977) @@ -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,8 +43,12 @@ * Occured when content header clicked */ eventOnSort: {}, + /** + * Occured when column width adjusted + */ + eventOnResizeColumn: {}, - initialize: function(element, dataModel, templates, options) { + initialize: function(element, dataModel, templates) { ClientUI.controls.grid.Grid.parentClass.constructor().call(this, element); if(!element || !element.id) this.element.id = "ClientUI_Grid" + ClientUI_controls_grid_Grid_idGenerator++; @@ -54,57 +57,68 @@ this.templates = $A(templates); this.eventOnSort = new ClientUI.common.utils.CustomEvent('OnSort'); + this.eventOnResizeColumn = new ClientUI.common.utils.CustomEvent('OnResizeColumn'); - // grid options - this.options = { - showIndexColumn: false, - indexColumnWidth: 30 - }; - if(options) { Object.extend(this.options, options); } - this.createControl(); }, createControl: function() { + //TODO: delete + document.gridStartTime = (new Date()).getTime(); + 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: + case GridLayout_Enum.HEADER: { + //TODO: delete + document.headerStartTime = (new Date()).getTime(); + var header = new ClientUI.controls.grid.GridHeader($(item.ref), grid); layout.addPane(GridLayout_Enum.HEADER, header); + + //TODO: delete + document.headerStopTime = (new Date()).getTime(); + break; - case GridLayout_Enum.BODY: + } + case GridLayout_Enum.BODY: { + //TODO: delete + document.bodyStartTime = (new Date()).getTime(); + var body = new ClientUI.controls.grid.GridBody($(item.ref), grid); layout.addPane(GridLayout_Enum.BODY, body); + + //TODO: delete + document.bodyStopTime = (new Date()).getTime(); + break; - case GridLayout_Enum.FOOTER: + } + case GridLayout_Enum.FOOTER: { + //TODO: delete + document.footerStartTime = (new Date()).getTime(); + var footer = new ClientUI.controls.grid.GridFooter($(item.ref), grid); layout.addPane(GridLayout_Enum.FOOTER, footer); + + //TODO: delete + document.footerStopTime = (new Date()).getTime(); + 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 - }); - } + //TODO: delete + document.gridParseTime = (new Date()).getTime(); - this._parseRowAndAddToStrips("header", this.getHeader().getRow()); - if(this.getFooter()) { - this._parseRowAndAddToStrips("footer", this.getFooter().getRow()); - } - this.currentScrollPos = 0; this.controlCreated = true; this.updateLayout(); + + //TODO: delete + document.gridEndTime = (new Date()).getTime(); }, updateLayout: function() { if(!this.controlCreated) { @@ -124,170 +138,35 @@ 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.getHeader().adjustColumnWidth(index, width); + this.getBody().adjustColumnWidth(index, width); + if(this.getFooter()) this.getFooter().adjustColumnWidth(index, width); this.updateLayout(); - - if(ClientUILib.isIE) { - ctrlsIE.each(function(ctrl){ - Element.show(ctrl); - }); - } + this.eventOnResizeColumn.fire(index, width); }, 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); + getScrollOffset: function() { + return this.currentScrollPos ? this.currentScrollPos : 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(); - }); - + var columns = this.getHeader().getColumns(); + for(var i=0; i<columns.length; i++) { + totalWidth += columns[i].width; + } return totalWidth; }, getColumnsFrozenWidth: function() { @@ -295,16 +174,21 @@ var columns = this.getHeader().getColumns(); var i = 0; while(i<columns.length && columns[i].frozen) { - totalWidth += columns[i++].object.getWidth(); + totalWidth += columns[i++].width; } 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); + } + }, + setProgressCtrl: function(ctrl) { + this.getBody().setProgressCtrl(ctrl); } }) 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-06-01 15:00:11 UTC (rev 976) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody.js 2007-06-01 15:00:26 UTC (rev 977) @@ -6,6 +6,8 @@ ClientUILib.declarePackage("ClientUI.controls.grid.GridBody"); ClientUILib.requireClass("ClientUI.common.box.Box"); +ClientUILib.requireClass("ClientUI.common.box.SplashBox"); +ClientUILib.requireClass("ClientUI.controls.grid.DataCash"); /* * GridHeader.js - Grid control header pane @@ -29,18 +31,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, @@ -52,8 +44,7 @@ */ initialize: function(template, grid) { this.grid = grid; - ClientUI.controls.grid.GridBody.parentClass.constructor().call(this, null, grid.getElement()); - this.element.id = this.grid.getElement().id + "_Body"; + ClientUI.controls.grid.GridBody.parentClass.constructor().call(this, template); // declare event listeners this._eventOnHScroll = this._onContentHScroll.bind(this); @@ -64,111 +55,82 @@ 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); + }, + 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); }, + _onDataReady: function(options) { + // load rows data + var currTime = (new Date()).getTime(); + + this.invalidate(options); + + var loadTime = (new Date()).getTime(); + + ClientUILib.log(ClientUILogger.ERROR, "Total time of data loading of "+options.count+" rows is: " + (loadTime - this.taskDefineTime) + " miliseconds."); + ClientUILib.log(ClientUILogger.WARNING, "start index: " + options.index + ", and startRow: " + options.startRow); + ClientUILib.log(ClientUILogger.WARNING, "data prepare time: " + (this.taskStartLoadingTime - this.taskStartTime)); + + ClientUILib.log(ClientUILogger.WARNING, "data load time: " + (currTime - document.cntStart)); + ClientUILib.log(ClientUILogger.WARNING, "invalidation time: " + (loadTime - currTime)); + }, _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); }, - 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(); + createControl: function(template) { - for(var i=0; i<100; i++) { - var rowData = this.grid.dataModel.getRow(i); - rows[i].loadRowData(rows[i], i, rowData); + var childs = template.childNodes; + for(var i=0; i<childs.length; i++) { + if(childs[i].tagName && childs[i].tagName.toLowerCase() == "div") { + this.container = new ClientUI.common.box.Box(childs[i], null, true); + if(!ClientUILib.isIE) this.container.setStyle({overflow: 'hidden'}); + break; + } } - ClientUILib.log(ClientUILogger.WARNING, "100 rows loaded over: " + ((new Date()).getTime() - currTime) + " miliseconds."); - }, - _onDataReady: function(options) { - // load rows data - var currTime = (new Date()).getTime(); + // create scroll box + this.scrollBox = new ClientUI.common.box.ScrollableBox(null, this.getElement()); + this.scrollBox.makeAbsolute(); + this.scrollBox.setWidth(this.getWidth()); + this.scrollBox.setHeight(this.getHeight()); + this.sizeBox = new ClientUI.common.box.Box(null, this.scrollBox.getElement()); + this.sizeBox.makeAbsolute(); - 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 - var ch = $(template).firstChild; - while(ch) { - if(ch.tagName && ch.tagName.toLowerCase()=="table") { - this.template = $(ch); - break; + 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.indexOf("FrozenBox")>=0) { + frozen = childs[i]; } - ch = ch.nextSibling; + else if(childs[i].id && childs[i].id.indexOf("NormalBox")>=0){ + normal = childs[i]; + } } - template.parentNode.removeChild(template); - document.body.appendChild(template); - - var errMsg = ""; - if(!this.template) { - errMsg = "Invalid template specified. GridFooter requires template specified over table element."; + if(!normal || !frozen) { + errMsg = "Unable to parse template for GridBody. Unable to find FrozenBox or NormalBox."; ClientUILib.log(ClientUILogger.ERROR, errMsg); throw(errMsg); } - if(!this.parseTemplate(this.template)) { - errMsg = "Unable to parse template. GridFooter requires template specified over table element with one row."; - ClientUILib.log(ClientUILogger.ERROR, errMsg); - throw(errMsg); - } - // Remove template - document.body.removeChild(template); - - // create scroll box - this.scrollBox = new ClientUI.common.box.ScrollableBox(null, this.getElement()); - this.scrollBox.makeAbsolute(); - this.contentBox = new ClientUI.common.box.Box(null, this.getElement()); + this.contentBox = new ClientUI.common.box.Box(normal); this.contentBox.makeAbsolute(); - this.frozenContentBox = new ClientUI.common.box.Box(null, this.getElement()); + this.frozenContentBox = new ClientUI.common.box.Box(frozen); this.frozenContentBox.makeAbsolute(); - this.sizeBox = new ClientUI.common.box.Box(null, this.scrollBox.getElement()); - this.sizeBox.makeAbsolute(); - + this.helpObject1 = new ClientUI.common.box.Box($(document.createElement("img")), this.contentBox.getElement()); this.helpObject1.setWidth(10); this.helpObject1.setHeight(10); @@ -176,55 +138,74 @@ this.helpObject2 = new ClientUI.common.box.Box($(document.createElement("img")), this.frozenContentBox.getElement()); this.helpObject2.setWidth(10); this.helpObject2.setHeight(10); - this.helpObject2.makeAbsolute(); + this.helpObject2.makeAbsolute(); // create row template - this._createRowTemplate(); + 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; + } + ch = this.contentBox.getElement().firstChild; + 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; + } + + this.parseTemplate(this.templFrozen.getElement(), this.templNormal.getElement()); + + // init cash with initial data + var cash = this.getCash(); + var frows = this.templFrozen.getElement().rows; + var nrows = this.templNormal.getElement().rows; + var count = this.rowsCount; + for(var i=0; i<count; i++) { + cash.setRow(i, {f: frows[i].innerHTML, n: nrows[i].innerHTML}); + } + this.controlCreated = true; }, - parseTemplate: function(template) { - if(!template || !template.rows || template.rows.length===0) { + parseTemplate: function(templFrozen, templNormal) { + if(!templNormal || !templNormal.rows || templNormal.rows.length===0) { return false; } - - var columns = []; - // Get columns information - var i = 0; - if(this.grid.options.showIndexColumn) { - columns[i++] = { - value: "$(row)", - styleClass: "", - id: "", - align: "left", - valign: "middle", - indexRow: true - }; - } - - var cells = $A(template.rows[0].cells); - cells.each(function(cell) { - columns[i++] = { - value: cell.innerHTML, - styleClass: cell.className, - id: cell.id, - align: cell.align, - valign: cell.vAlign - }; - - Element.addClassName(cell, "ClientUI_Grid_BCBody"); + var columns = this.grid.getHeader().getColumns(); + var i=0; + var cols = $A(this.templFrozen.getElement().getElementsByTagName("col")); + cols.each(function(col) { + columns[i].bodyCol = $(col); + i++; }); - this._columns = columns; - this.defaultRowHeight = Element.getHeight(template.rows[0].cells[0]); + cols = $A(this.templNormal.getElement().getElementsByTagName("col")); + cols.each(function(col) { + columns[i].bodyCol = $(col); + i++; + }); + + 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"); - } + } + this.helpObj = new ClientUI.common.box.Box(templFrozen, null, true); + this.countToLoad = 0; + this.startRow = 0; + this.startIndex = 0; + this.currRange = $R(0, this.rowsCount); + return true; }, - getColumns: function() { - return this._columns; - }, setScrollPos: function(pos) { + ClientUILib.log(ClientUILogger.ERROR, "setScrollPos: " + pos); this.contentBox.getElement().scrollTop = pos; this.frozenContentBox.getElement().scrollTop = pos; if(ClientUILib.isIE && !ClientUILib.isIE7) { @@ -240,385 +221,102 @@ if(!this.scrollBox || !this.contentBox || !this.sizeBox) { return; } - - var scrollLeft = this.contentBox.getElement().scrollLeft; + + var totalWidth = this.grid.getColumnsTotalWidth(); + this.scrollBox.moveTo(0, 0); + this.scrollBox.setWidth(this.getWidth()); + this.scrollBox.setHeight(this.getHeight()); + + var scrollLeft = this.grid.getScrollOffset(); 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.scrollBox.setHeight(this.getHeight()); + var viewWidth = this.scrollBox.getViewportWidth(); + this.container.setWidth(viewWidth); - this.contentBox.setWidth(this.scrollBox.getViewportWidth()-frozenContentWidth); + if(ClientUILib.isIE) { + this.contentBox.setWidth(viewWidth - frozenContentWidth); + } + else { + this.contentBox.setWidth(Math.max(this.getWidth(), totalWidth)); + } + this.contentBox.setHeight(height - fixH); this.frozenContentBox.setWidth(frozenContentWidth); - this.frozenContentBox.setHeight(height - fixH); + this.frozenContentBox.setHeight(height - fixH); - var scrollPos = Math.min(totalWidth - frozenContentWidth - this.contentBox.getWidth(), scrollLeft); + var scrollPos = Math.min(totalWidth - viewWidth, scrollLeft); this.grid.adjustScrollPosition(scrollPos); this.dataVisible = parseInt(this.contentBox.getHeight() / this.defaultRowHeight, 10) + 1; + this.dataVisible = Math.min(this.dataVisible, this.rowsCount); if(height > 0) { this.adjustDataPosition(this.currentPos); - } + } }, adjustScrollPosition: function(pos) { - this.contentBox.getElement().scrollLeft = pos; + this.templNormal.moveToX(-pos); }, - getScrollXPosition: function() { - return this.contentBox.getElement().scrollLeft; - }, getScrollYPosition: function() { return this.contentBox.getElement().scrollTop; }, - _createRowTemplate: function() { - var headerRow = new ClientUI.common.box.InlineBox(null, this.contentBox.getElement()); - headerRow.getElement().addClassName("ClientUI_Grid_BR"); - headerRow.setWidth(10000); - headerRow.setHeight(this.defaultRowHeight); - headerRow.makeAbsolute(); - headerRow.moveTo(0, -100); - headerRow.rowindex = -1; + adjustDataPosition: function (pos) { + if(this.currentPos == pos) { + return; + } - var headerFrozenRow = new ClientUI.common.box.InlineBox(headerRow.getElement().cloneNode(true)); - headerFrozenRow.setParent(this.frozenContentBox.getElement()); - - var frozenContentBox = this.frozenContentBox; - var rowClientHeight = headerRow.getViewportHeight(); - var bodyWidthFix = 0; - var bodyHeightFix = 0; - - var columnZIndex = this.grid.getHeader().getColumns().length*3 + 10; - var calculateFixes = true; - var defaultWidth = 0; - var defaultWidthFrozen = 0; - var columns = this._columns; - var i = 0; + // 1. calculate direction and range to load next data + this.processedPos = pos; + var forwardDir = (this.currentPos <= pos) ? true : false; - this.grid.getHeader().getColumns().each(function(headerColumnDesc) { - - var columnDesc = columns[i++]; - var width = headerColumnDesc.object.getWidth(); - var height = rowClientHeight; - - var parent = headerColumnDesc.frozen ? headerFrozenRow.getElement() : headerRow.getElement(); - var col = new ClientUI.common.box.InlineBox(null, parent); - col.makeAbsolute(); - var styles = columnDesc.indexRow ? "ClientUI_Grid_BCIndex" : "ClientUI_Grid_BC"; - col.getElement().addClassName(styles); - - if(columnDesc.indexRow) { - height -= col.getBorderWidth("tb"); - //height = height + "px !important"; - } - - col.getElement().setStyle({zIndex: columnZIndex}); - columnZIndex -= 3; - col.getElement().columnindex = i-1; - col.getElement().hidefocus = "true"; - col.getElement().tabindex="0"; - col.setWidth(width); - col.setHeight(height); - - if(!headerColumnDesc.frozen) { - col.moveToX(defaultWidth); - defaultWidth += width; - } - else { - col.moveToX(defaultWidthFrozen); - defaultWidthFrozen += width; - } - - var colBody = new ClientUI.common.box.InlineBox(null, col.getElement()); - if(!Validators.isEmpty(columnDesc.styleClass)) { - colBody.getElement().addClassName(columnDesc.styleClass); - } - colBody.getElement().addClassName("ClientUI_Grid_BCBody"); - if(calculateFixes && ClientUILib.isGecko) { - bodyWidthFix = colBody.getBorderWidth("lr") + colBody.getPadding("lr"); - bodyHeightFix = colBody.getBorderWidth("tb") + colBody.getPadding("tb"); - calculateFixes = false; - } - colBody.setWidth(width - bodyWidthFix); - colBody.setHeight(height - bodyHeightFix); - if(!Validators.isEmpty(columnDesc.valign)) { - colBody.getElement().setStyle({verticalAlign: columnDesc.valign}); - } - if(!Validators.isEmpty(columnDesc.align)) { - colBody.getElement().setStyle({textAlign: columnDesc.align}); - } - }); + // first visible row index + var first = parseInt(pos / this.defaultRowHeight) - 1; + if(first < 0) first = 0; + + // check direction and predict some next rows + 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()); - headerRow.hide(); - headerFrozenRow.hide(); - this.headerRowTemplate = headerRow; - this.headerFrozenRowTemplate = headerFrozenRow; - }, - _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); + if(from == 0) { + to = this.rowsCount; } - else { // first time - row = this.headerRowTemplate.getElement().cloneNode(true); - rowFrozen = this.headerFrozenRowTemplate.getElement().cloneNode(true); + else if(to == this.grid.dataModel.getCount()) { + from = to - this.rowsCount; } + + var range = $R(from, to); - 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(); + if(this.currRange.start == from && this.currRange.end == to) { + return; } - 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); + var task = this._getPendingTask(); if(to - from > 0) { task.timer = null; task.from = from; - task.to = to; + task.to = to; + task.first = first; + task.pos = pos; this._setPendingTask(task); } }, @@ -629,67 +327,393 @@ rowsToLoad: [], rowsToLoadIdx: [], from: 0, - to: 0 + to: 0, + first: 0, + pos: 0 }; } return this.pendingTask; }, _setPendingTask: function(task) { + clearTimeout(this.pendingTask.timer); + this.pendingTask.timer = null; + this.pendingTask = 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); - - // 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); + this.startLoadData(); + }.bind(this), this.grid.dataModel.getRequestDelay()); + }, + adjustColumnWidth: function(column, width) { + var columns = this.grid.getHeader().getColumns(); + columns[column].bodyCol.width = width; + }, + startLoadData: function() { + if(this.updateStarted) { + this._setPendingTask(this._getPendingTask()); + return; + } + + this.updateStarted = true; + this.taskStartTime = (new Date()).getTime(); + + var task = this._getPendingTask(); + var range = $R(task.from, task.to); + var switchType = 5; + var startIndex = 0; + var startRowIndx = 0; + var countToLoad = 0; + + // if we have intersepted ranges than rearrange rows + // in other case just move rows table to first position + if(this.currRange.end < range.start + || this.currRange.start > range.end) { + switchType = 0; + } + + if(switchType === 0) { + startRowIndx = this._getRowIndex(this.templFrozen.getElement().rows[0].id); + startIndex = range.start; + countToLoad = range.end - range.start; + } + else { + var i, row, rownew, cloned; + countToLoad = 0; + var frozenTbl = this.templFrozen.getElement(); + var normalTbl = this.templNormal.getElement(); + if(range.start > this.currRange.start + && range.start < this.currRange.end) { + switchType = 1; + countToLoad = range.start - this.currRange.start; + if(countToLoad > 0) { + startRowIndx = this._getRowIndex(frozenTbl.rows[0].id); + startIndex = this.currRange.end; } - else { - this.dataViewHash[row.rowindex] = this.dataView[i]; - newDataView.push(row); + } + else if(range.start == this.currRange.start) { + switchType = 3; + countToLoad = range.end - this.currRange.end; + if(countToLoad > 0) { + startIndex = this.currRange.end; + var restCount = this.rowsCount - countToLoad; + startRowIndx = this._getRowIndex(frozenTbl.rows[restCount].id); } } - this.dataView = newDataView; + else { + switchType = 2; + countToLoad = this.currRange.start - range.start; + if(countToLoad > 0) { + startIndex = range.start; + var restCount = this.rowsCount - countToLoad; + startRowIndx = this._getRowIndex(frozenTbl.rows[restCount].id); + } + } + } + + this.taskStartLoadingTime = (new Date()).getTime(); + + var process = true; + if(startIndex > (task.first + this.dataVisible) || + (startIndex + countToLoad) < task.first) { + process = false; + } + if(countToLoad > 0 && process) { + this.updateStarted = true; + ClientUILib.log(ClientUILogger.WARNING, "Start loading..."); + ClientUILib.log(ClientUILogger.WARNING, "start index: " + startIndex + ", and startRow: " + startRowIndx + ", and count: " + countToLoad); + this.currRange = range; + this.currentPos = task.pos; - // 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.taskDefineTime = (new Date()).getTime(); + + this.showSplash(); + this.container.hide(); + + var options = { + index: startIndex, + count: countToLoad, + startRow: startRowIndx, + switchType: switchType + }; + var opt = { + index: options.index, + count: options.count, + startRow: options.startRow, + switchType: options.switchType + }; + options = this.processCashedValues(options); + if(options.count > 0) { + // Make timer to handle quick clicks on scrollbar arrows + setTimeout(function() { + + // 4. start data loading + this.updateInterval = screen.updateInterval; + screen.updateInterval = 1000; + + this.grid.dataModel.loadRows(options); + }.bind(this), 10); + } + else { + this.invalidate(opt); + this.updateStarted = false; + } + } + else { + this.updateStarted = false; + } + }, + + setProgressCtrl: function(ctrl) { + this.splash = ctrl; + this.splash.setParent(this.getElement()); + this.splash.moveTo(0, 0); + }, + showSplash: function () { + if(!this.splash) { + this.setProgressCtrl(new ClientUI.common.box.SplashBox(null, this.getElement(), 300)); + } + this.splash.show(); + this.splash.setSize(this.scrollBox.getViewportWidth(), this.scrollBox.getViewportHeight()); + this.splash.updateLayout(); + }, + + rearrangeRows: function(options, updateCash, showContainer) { + var frozenTbl = this.templFrozen.getElement(); + var normalTbl = this.templNormal.getElement(); + var cash = this.getCash(); + + if(options.switchType === 0) { + var visibleRowPos = this.defaultRowHeight * options.index; + var test = this.contentBox.getElement().scrollTop; + if(showContainer) this._showContainer(); + this.templFrozen.moveToY(visibleRowPos); + this.templNormal.moveToY(visibleRowPos); + + if(updateCash) { + var frows = frozenTbl.rows; + var nrows = normalTbl.rows; + var count = frows.length; + var index = options.index; + for(var i=0; i<count; i++) { + cash.setRow(index+i, {f: frows[i].innerHTML, n: nrows[i].innerHTML}); } } + } + else if(options.switchType === 1 || options.switchType === 2) { + // store visible row pos to restore after rows reerrange + var count = frozenTbl.rows.length; + var frows = new Array(count), nrows = new Array(count); + var j = 0, i; + var index = options.index; - this.taskStartLoadingTime = (new Date()).getTime(); - // 4. start data loading - this.grid.dataModel.loadRows({ - indexes: rowsToLoadIdx, - ids: rowsToLoad}); + if(options.switchType === 1) { + for(i=options.count; i<this.rowsCount; i++) { + frows[j] = frozenTbl.rows[i]; + nrows[j] = normalTbl.rows[i]; + j++; + } + for(i=0; i<options.count; i++) { + frows[j] = frozenTbl.rows[i]; + nrows[j] = normalTbl.rows[i]; + if(updateCash) { + cash.setRow(index+i, {f: frows[j].innerHTML, n: nrows[j].innerHTML}); + } + j++; + } + } + else { + for(i=this.rowsCount - options.count; i<this.rowsCount; i++) { + frows[j] = frozenTbl.rows[i]; + nrows[j] = normalTbl.rows[i]; + if(updateCash) { + cash.setRow(index+j, {f: frows[j].innerHTML, n: nrows[j].innerHTML}); + } + j++; + } + for(i=0; i<this.rowsCount - options.count; 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); + } - clearTimeout(task.timer); - task.timer = null; - task.from = 0; - task.to = 0; - }.bind(this), this.grid.dataModel.getRequestDelay()); + // insert in the new order + for (i = 0; i < count; i++) { + fbody.appendChild(frows[i]); + nbody.appendChild(nrows[i]); + } - this.pendingTask = task; - }, + if(removeChilds) { + fp.insertBefore(fbody, fnextSibling); + np.insertBefore(nbody, nnextSibling); + } + + var visibleRowPos = (options.switchType == 1) ? this.currRange.start * this.defaultRowHeight : options.index * this.defaultRowHeight; + if(showContainer) this._showContainer(); + this.templFrozen.moveToY(visibleRowPos); + this.templNormal.moveToY(visibleRowPos); + } + else { + if(updateCash) { + var frows = frozenTbl.rows; + var nrows = normalTbl.rows; + var count = frows.length; + var index = options.index; + for(var i=0; i<count; i++) { + cash.setRow(index+i, {f: frows[i].innerHTML, n: nrows[i].innerHTML}); + } + } + var visibleRowPos = this.currRange.start * this.defaultRowHeight; + if(showContainer) this._showContainer(); + this.templFrozen.moveToY(visibleRowPos); + this.templNormal.moveToY(visibleRowPos); + } + }, + _showContainer: function() { + this.container.show(); + this.setScrollPos(this.currentPos); + }, + /** + * show hiden rows after loading them from datasource + * @param {Object} options + */ invalidate: function(options) { - this.dataView.each(function(row) { - row.show(); - }); + + ClientUILib.log(ClientUILogger.WARNING, "Stop loading."); + screen.updateInterval = this.updateInterval; + + setTimeout(function () { + this.rearrangeRows(options, true, true); + this.container.show(); + this.splash.hide(); + this.updateStarted = false; + + }.bind(this), 10); + + /*if(this.processedPos != this.currentPos) { + this.currentPos = this.processedPos; + setTimeout(function (){ + this.pendedUpdate(); + }.bind(this), this.grid.dataModel.getRequestDelay()); + }*/ + }, + /*pendedUpdate: function() { + if(this.processedPos != this.currentPos) { + this.currentPos = this.processedPos; + setTimeout(function (){ + this.pendedUpdate(); + }.bind(this), this.grid.dataModel.getRequestDelay()); + } + else { + this.adjustDataPosition(this.processedPos); + } + },*/ + getCash: function() { + if(!this.cash) { + this.cash = new ClientUI.controls.grid.DataCash(this.grid.dataModel.getCount()); + } + return this.cash; + }, + _restoreFromCash: function(options) { + var count = options.count; + var index = options.index; + var startRow = options.startRow; + var cash = this.getCash(); + var frows = this.templFrozen.getElement().rows; + var nrows = this.templNormal.getElement().rows; + + var row, rowU, i=0; + var rowC = cash.getRow(index); + do { + row = frows[startRow]; + rowU = row.cloneNode(true); + rowU.innerHTML = rowC.f; + row.parentNode.replaceChild(rowU, row); + + row = nrows[startRow]; + rowU = row.cloneNode(true); + rowU.innerHTML = rowC.n; + row.parentNode.replaceChild(rowU, row); + + i++; + startRow++; + if(startRow >= this.rowsCount) startRow = 0; + rowC = cash.getRow(index + i); + } while(i<count && rowC); + + setTimeout(function () { + this.rearrangeRows(options); + this.container.show(); + this.splash.hide(); + this.updateStarted = false; + + }.bind(this), 10); + }, + processCashedValues: function(options) { + return options; + + var opt = {switchType: options.switchType }; + var cash = this.getCash(); + var count = options.count; + var index = options.index; + var startRow = options.startRow; + + var i = 0; + var rowC; + + while(i<count && (rowC = cash.getRow(index + i))!=null) i++; + if(i>0) { // there are cashed rows from start + opt.count = i; + opt.index = index; + opt.startRow = startRow; + this._restoreFromCash(opt); + + options.count -= i; + options.index = index+i; + options.startRow = startRow+i; + if(options.startRow >= this.rowsCount) options.startRow -= this.rowsCount; + } + + var cnt = 0; + while(i<count && !(rowC = cash.getRow(index + i))) { i++; cnt++; } + if(i<count) { // there are cashed rows at the end of range + opt.count = options.count - cnt; + opt.index = index+i; + opt.startRow = startRow+i; + if(opt.startRow >= this.rowsCount) opt.startRow -= this.rowsCount; + this._restoreFromCash(opt); + + options.count = cnt; + options.index = index+(i-cnt); + options.startRow = startRow+(i-cnt); + if(options.startRow >= this.rowsCount) options.startRow -= this.rowsCount; + } + + return options; + }, + _getRowIndex: function(rowId) { + // prefix:row_2 + var index = -1; + var match, pattern = /\:row_(\d*)/i; + if (match = rowId.match(pattern)) { + index = parseFloat(match[1]); + } + return index; } }); 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-06-01 15:00:11 UTC (rev 976) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js 2007-06-01 15:00:26 UTC (rev 977) @@ -250,9 +250,6 @@ adjustScrollPosition: function(pos) { this.contentBox.getElement().scrollLeft = pos; }, - getScrollXPosition: function() { - return this.contentBox.getElement().scrollLeft; - }, getScrollYPosition: function() { return this.contentBox.getElement().scrollTop; }, 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-06-01 15:00:11 UTC (rev 976) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridFooter.js 2007-06-01 15:00:26 UTC (rev 977) @@ -22,211 +22,109 @@ Object.extend(ClientUI.controls.grid.GridFooter.prototype, { initialize: function(template, grid) { this.grid = grid; - ClientUI.controls.grid.GridFooter.parentClass.constructor().call(this); - this.element.id = this.grid.getElement().id + "_Footer"; - + ClientUI.controls.grid.GridFooter.parentClass.constructor().call(this, template); this.createControl(template); }, createControl: function(template) { - // validate template - var ch = $(template).firstChild; - while(ch) { - if(ch.tagName && ch.tagName.toLowerCase()=="table") { - this.template = $(ch); - break; - } - ch = ch.nextSibling; - } - - template.parentNode.removeChild(template); - document.body.appendChild(template); - - if(!this.template) { - var errMsg = "Invalid template specified. GridFooter requires template specified over table element."; + var errMsg = ""; + if(!template) { + errMsg = "Invalid template specified for GridFooter."; ClientUILib.log(ClientUILogger.ERROR, errMsg); throw(errMsg); } - if(!this.parseTemplate(this.template)) { - var errMsg = "Unable to parse template. GridFooter requires template specified over table element with one row."; + + if(!this.parseTemplate(template)) { + errMsg = "Unable to parse template. GridFooter requires template specified over table element with one row."; ClientUILib.log(ClientUILogger.ERROR, errMsg); throw(errMsg); } - this.contentBox = new ClientUI.common.box.Box(null, this.getElement()); - this.contentBox.makeAbsolute(); - this.frozenContentBox = new ClientUI.common.box.Box(null, this.getElement()); - this.frozenContentBox.makeAbsolute(); - - // generate DOM objects tree - this.generateDOMTree(); - - // Remove template - document.body.removeChild(template); - // Set dimensions this.setHeight(this.defaultHeight); this.setWidth(this.defaultWidth); 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 || !template.rows || template.rows.length===0) { + if(!template) { return false; } - - var columns = []; - - // Get columns information - var i = 0; - if(this.grid.options.showIndexColumn) { - columns[i++] = { - innerHTML: " ", - styleClass: "", - id: "", - align: "", - valign: "", - title: "" - }; + + var childs = template.childNodes; + for(var i=0; i<childs.length; i++) { + if(childs[i].tagName && childs[i].tagName.toLowerCase() == "div") { + this.container = new ClientUI.common.box.Box(childs[i], null, true); + break; + } } - - var cells = $A(template.rows[0].cells); - cells.each(function(cell) { - columns[i++] = { - innerHTML: cell.innerHTML, - styleClass: cell.className, - id: cell.id, - align: cell.align, - valign: cell.vAlign, - title: cell.title - }; - Element.addClassName(cell, "ClientUI_Grid_FCBody"); - }); - this._columns = columns; - this.defaultHeight = Element.getHeight(template.rows[0].cells[0]); - if(ClientUILib.isGecko) { - this.defaultHeight -= this.getBorderWidth("tb") + this.getPadding("tb"); + 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.indexOf("FrozenBox")>=0) { + frozen = childs[i]; + } + else if(childs[i].id && childs[i].id.indexOf("NormalBox")>=0){ + normal = childs[i]; + } } - - return true; - }, - generateDOMTree: function() { - var headerRow = new ClientUI.common.box.InlineBox(null, this.contentBox.getElement()); - headerRow.getElement().addClassName("ClientUI_Grid_FR"); - headerRow.getElement().id = this.getElement().id + "FR"; - headerRow.setHeight(this.defaultHeight) - var headerFrozenRow = new ClientUI.common.box.InlineBox(headerRow.getElement().cloneNode(true)); - headerFrozenRow.setParent(this.frozenContentBox.getElement()); - headerFrozenRow.getElement().setAttribute("id", this.getElement().id + "FRFroz"); + if(!normal || !frozen) { + errMsg = "Unable to parse template for GridFooter. Unable to find FrozenBox or NormalBox."; + ClientUILib.log(ClientUILogger.ERROR, errMsg); + throw(errMsg); + } + this.contentBox = new ClientUI.common.box.Box(normal); + this.contentBox.makeAbsolute(); + this.frozenContentBox = new ClientUI.common.box.Box(frozen); + this.frozenContentBox.makeAbsolute(); - var columnZIndex = this.grid.getHeader().getColumns().length*2 + 10; - var lastFrozenZIndex = columnZIndex; - var frozenContentBox = this.frozenContentBox; - var rowHeight = headerRow.getViewportHeight(); - var defaultWidth = 0; - var defaultWidthFrozen = 0; - var columns = this._columns; - var i = 0; - this.grid.getHeader().getColumns().each(function(headerColumnDesc) { - var columnDesc = columns[i++]; - - // create footer cell - var parent = headerColumnDesc.frozen ? headerFrozenRow.getElement() : headerRow.getElement(); - var col = new ClientUI.common.box.InlineBox(null, parent); - col.getElement().addClassName("ClientUI_Grid_FC"); - col.setStyle({zIndex: columnZIndex}); - if(headerColumnDesc.frozen) { - lastFrozenZIndex = columnZIndex; - } - columnZIndex -= 2; - - if(!Validators.isEmpty(columnDesc.styleClass)) { - col.getElement().addClassName(columnDesc.styleClass); + // create row template + var ch = this.contentBox.getElement().firstChild; + while(ch) { + if(ch.tagName && ch.tagName.toLowerCase()=="table") { + this.headerRow = new ClientUI.common.box.Box($(ch), null, true); + break; } - if(!Validators.isEmpty(columnDesc.id)) { - col.getElement().id = columnDesc.id; + ch = ch.nextSibling; + } + ch = this.frozenContentBox.getElement().firstChild; + while(ch) { + if(ch.tagName && ch.tagName.toLowerCase()=="table") { + this.headerFrozenRow = new ClientUI.common.box.Box($(ch), null, true); + break; } - if(!Validators.isEmpty(columnDesc.title)) { - col.getElement().title = columnDesc.title; - } - if(!Validators.isEmpty(columnDesc.valign)) { - col.getElement().setStyle({verticalAlign: columnDesc.valign}); - } + ch = ch.nextSibling; + } - // get cell width from header - var width = headerColumnDesc.object.getWidth(); - col.setWidth(width); - col.setHeight(rowHeight); - col.makeAbsolute(); - columnDesc.object = col; - if(!headerColumnDesc.frozen) { - col.moveToX(defaultWidth); - defaultWidth += width; - } - else { - col.moveToX(defaultWidthFrozen); - defaultWidthFrozen += width; - } - - // header cell body - var colBody = new ClientUI.common.box.InlineBox(null, col.getElement()); - colBody.getElement().addClassName("ClientUI_Grid_FCBody"); - // glue cell content - var sb = new StringBuilder('<table width="100%" '); - if(!Validators.isEmpty(columnDesc.align)) { - sb.append('align="').append(columnDesc.align).append('" '); - } - sb.append('cellspacing="0" cellpadding="0" border="0"><tbody><tr><td width="100%"><span style="width:100%">'); - if(!Validators.isEmpty(columnDesc.innerHTML)) { - sb.append(columnDesc.innerHTML); - } - sb.append('</span></td></tr></tbody></table>'); - colBody.getElement().update(sb.toString()); - colBody.moveTo(0, 0); - var bodyWidth = width; - var bodyHeight = rowHeight; - if(ClientUILib.isGecko) { - bodyWidth -= colBody.getBorderWidth("lr") + colBody.getPadding("lr"); - bodyHeight -= colBody.getBorderWidth("tb") + colBody.getPadding("tb"); - } - colBody.setWidth(bodyWidth); - colBody.setHeight(bodyHeight); + var columns = this.grid.getHeader().getColumns(); + var i=0; + var cols = $A(this.headerFrozenRow.getElement().getElementsByTagName("col")); + cols.each(function(col) { + columns[i].footerCol = $(col); + i++; }); - - this.defaultWidth = defaultWidth; + cols = $A(this.headerRow.getElement().getElementsByTagName("col")); + cols.each(function(col) { + columns[i].footerCol = $(col); + i++; + }); + + this.helpObj = new ClientUI.common.box.Box(this.frozenContentBox.getElement(), null, true); + this.defaultWidth = this.grid.getHeader().defaultWidth; + this.defaultHeight = Element.getHeight(this.headerRow.getElement().rows[0].cells[0]); if(ClientUILib.isGecko) { - this.defaultWidth -= this.getBorderWidth("lr") + this.getPadding("lr"); + this.defaultHeight -= this.getBorderWidth("tb") + this.getPadding("tb"); + //this.defaultWidth -= this.getBorderWidth("lr") + this.getPadding("lr"); } - - this.headerRow = headerRow; - this.headerFrozenRow = headerFrozenRow; + if(ClientUILib.isIE) { - this.substrate = new ClientUI.common.box.Substrate(null, this.getElement()); - this.substrate.getElement().name = this.getElement().id + "FRFrm"; - this.substrate.setStyle({zIndex: lastFrozenZIndex-1}); - this.substrate.setHeight(rowHeight); - } - }, - getColumns: function() { - return this._columns; + this.frozenSubstrate = new ClientUI.common.box.Substrate(null, this.getElement()); + this.frozenSubstrate.getElement().name = this.getElement().id + "FRFrm"; + Element.addClassName(this.frozenSubstrate.getElement(), "ClientUI_HRFrm"); + this.frozenSubstrate.setHeight(this.defaultHeight); + } + return true; }, updateLayout: function() { if(!this.controlCreated || !this.grid.controlCreated) { @@ -240,21 +138,23 @@ this.contentBox.setWidth(Math.max(this.getWidth(), totalWidth)); this.contentBox.setHeight(height); - this.contentBox.moveTo(frozenContentWidth, 0); + this.contentBox.moveTo(frozenContentWidth - this.grid.getScrollOffset(), 0); this.frozenContentBox.setWidth(frozenContentWidth); this.frozenContentBox.setHeight(height); this.frozenContentBox.moveTo(0, 0); - var row = this.getRow(); - row.frozen.setWidth(frozenContentWidth); - row.normal.setWidth(Math.max(this.getWidth(), totalWidth)); var frozenContentWidth = this.grid.getBody().frozenContentBox.getWidth(); - var width = frozenContentWidth+this.grid.getBody().contentBox.getWidth(); - this.setWidth(width); + + var viewWidth = this.grid.getBody().scrollBox.getViewportWidth(); + this.container.setWidth(viewWidth); + this.setWidth(viewWidth); if(ClientUILib.isIE) - this.substrate.setWidth(frozenContentWidth); - this.adjustScrollPosition(this.grid.getColumnScrollX()); + this.frozenSubstrate.setWidth(frozenContentWidth); }, adjustScrollPosition: function(pos) { this.contentBox.moveToX(this.grid.getColumnsFrozenWidth()-pos); + }, + adjustColumnWidth: function(column, width) { + var columns = this.grid.getHeader().getColumns(); + columns[column].footerCol.width = width; } }) 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-06-01 15:00:11 UTC (rev 976) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader.js 2007-06-01 15:00:26 UTC (rev 977) @@ -28,8 +28,8 @@ // constructor initialize: function(template, grid) { this.grid = grid; - ClientUI.controls.grid.GridHeader.parentClass.constructor().call(this); - this.element.id = this.grid.getElement().id + "_Header"; + + ClientUI.controls.grid.GridHeader.parentClass.constructor().call(this, template); // register event handlers this.eventSepDblClick = this.OnSepDblClick.bindAsEventListener(this); @@ -45,85 +45,95 @@ // create grid header control createControl: function(template) { - // validate template - var ch = $(template).firstChild; - while(ch) { - if(ch.tagName && ch.tagName.toLowerCase()=="table") { - this.template = $(ch); - break; - } - ch = ch.nextSibling; - } - - template.parentNode.removeChild(template); - document.body.appendChild(this.template); - var errMsg = ""; - if(!this.template) { - errMsg = "Invalid template specified. GridHeader requires template specified over table element."; + if(!template) { + errMsg = "Invalid template specified for GridHeader."; ClientUILib.log(ClientUILogger.ERROR, errMsg); throw(errMsg); } - - if(!this.parseTemplate(this.template)) { + + if(!this.parseTemplate(template)) { errMsg = "Unable to parse template. GridHeader requires template specified over table element with one row."; ClientUILib.log(ClientUILogger.ERROR, errMsg); throw(errMsg); } - - //TODO: delete - document.generateDOMTime = (new Date()).getTime(); - - this.contentBox = new ClientUI.common.box.Box(null, this.getElement()); - this.contentBox.makeAbsolute(); - this.frozenContentBox = new ClientUI.common.box.Box(null, this.getElement()); - this.frozenContentBox.makeAbsolute(); - - // generate DOM objects tree - this.generateDOMTree(); - - // Remove template - document.body.removeChild(this.template); - + // Set dimensions this.setHeight(this.defaultHeight); this.setWidth(this.defaultWidth); this.controlCreated = true; this.updateLayout(); - - document.generateDOMEndTime = (new Date()).getTime(); + this.hide(); + this.show(); }, parseTemplate: function(template) { - if(!template || !template.rows || template.rows.length===0) { + if(!template) { return false; } + var childs = template.childNodes; + for(var i=0; i<childs.length; i++) { + if(childs[i].tagName && childs[i].tagName.toLowerCase() == "div") { + this.container = $(childs[i]); + break; + } + } + + 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.indexOf("FrozenBox")>=0) { + frozen = childs[i]; + } + else if(childs[i].id && childs[i].id.indexOf("NormalBox")>=0){ + normal = childs[i]; + } + } + + if(!normal || !frozen) { + errMsg = "Unable to parse template for GridHeader. Unable to find FrozenBox or NormalBox."; + ClientUILib.log(ClientUILogger.ERROR, errMsg); + throw(errMsg); + } + this.contentBox = new ClientUI.common.box.Box(normal); + this.contentBox.makeAbsolute(); + this.frozenContentBox = new ClientUI.common.box.Box(frozen); + this.frozenContentBox.makeAbsolute(); + + // create row template + var ch = this.contentBox.getElement().firstChild; + while(ch) { + if(ch.tagName && ch.tagName.toLowerCase()=="table") { + this.headerRow = 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.headerFrozenRow = new ClientUI.common.box.Box($(ch), null, true); + break; + } + ch = ch.nextSibling; + } + + this.helpObj = new ClientUI.common.box.Box(this.frozenContentBox.getElement(), null, true); + var columns = []; var defaultWidth = 0; + var defaultHeight = 0; - var i = 0; - if(this.grid.options.showIndexColumn) { - columns[i++] = { - width: this.grid.options.indexColumnWidth, - innerHTML: " ", - styleClass: "", - id: "", - align: "", - valign: "", - title: "", - minWidth: this.grid.options.indexColumnWidth, - frozen: true, - fixedWidth: true, - sortable: false, - sorted: "asc" - }; - } + var eventCellMouseDown = this.eventCellMouseDown.bind(this); // Get columns information - var cells = $A(template.rows[0].cells); + var i = 0, h, j=0; + var cols = $A(this.headerFrozenRow.getElement().getElementsByTagName("col")); + var cells = $A(this.headerFrozenRow.getElement().rows[0].cells); cells.each(function(cell) { - columns[i++] = { - width: parseInt(cell.width),/*Element.getWidth(cell),*/ + columns[i] = { + col: $(cols[j]), + width: parseInt(cols[j].width), //Element.getWidth(cell), innerHTML: cell.innerHTML, styleClass: cell.className, id: cell.id, @@ -131,194 +141,123 @@ valign: cell.vAlign, title: cell.title, minWidth: 10, - frozen: Validators.getBoolean(cell.getAttribute("frozen"), false), + frozen: true, fixedWidth: Validators.getBoolean(cell.getAttribute("fixedWidth"), false), - sortable: Validators.getBoolean(cell.getAttribute("sortable"), true), + sortable: Validators.getBoolean(cell.getAttribute("sortable"), false), sorted: Validators.getBoolean(cell.getAttribute("sorted"), "desc") }; - defaultWidth += Element.getWidth(cell); - Element.addClassName(cell, "ClientUI_Grid_HCBody"); + if(columns[i].sortable) + Event.observe(cell, 'click', eventCellMouseDown); + h = Element.getHeight(cell); + if(h > defaultHeight) defaultHeight = h; + defaultWidth += columns[i].width; + columns[i].object = new ClientUI.common.box.InlineBox(cell, null, true); + columns[i].sortDesc = document.getElementsByClassName("sort-desc", cell)[0]; + columns[i].sortAsc = document.getElementsByClassName("sort-asc", cell)[0]; + if(ClientUILib.isIE && columns[i].sortDesc) { + Element.setStyle(columns[i].sortDesc, {left: "-10px"}); + Element.setStyle(columns[i].sortAsc, {left: "-10px"}); + } + i++;j++; }); + + j=0; + cols = $A(this.headerRow.getElement().getElementsByTagName("col")); + cells = $A(this.headerRow.getElement().rows[0].cells); + cells.each(function(cell) { + columns[i] = { + col: $(cols[j]), + width: parseInt(cols[j].width), //Element.getWidth(cell), + innerHTML: cell.innerHTML, + styleClass: cell.className, + id: cell.id, + align: cell.align, + valign: cell.vAlign, + title: cell.title, + minWidth: 10, + frozen: false, + fixedWidth: Validators.getBoolean(cell.getAttribute("fixedWidth"), false), + sortable: Validators.getBoolean(cell.getAttribute("sortable"), false), + sorted: Validators.getBoolean(cell.getAttribute("sorted"), "desc") + }; + + if(columns[i].sortable) + Event.observe(cell, 'click', eventCellMouseDown); + h = Element.getHeight(cell); + if(h > defaultHeight) defaultHeight = h; + defaultWidth += columns[i].width; + columns[i].object = new ClientUI.common.box.InlineBox(cell, null, true); + columns[i].sortDesc = document.getElementsByClassName("sort-desc", cell)[0]; + columns[i].sortAsc = document.getElementsByClassName("sort-asc", cell)[0]; + if(ClientUILib.isIE && columns[i].sortDesc) { + Element.setStyle(columns[i].sortDesc, {left: "-10px"}); + Element.setStyle(columns[i].sortAsc, {left: "-10px"}); + } + i++;j++; + }); + columns.pop(); // remove last fake column this._columns = columns; - this.defaultHeight = Element.getHeight(template.rows[0].cells[0]); + this.defaultHeight = defaultHeight; this.defaultWidth = defaultWidth; if(ClientUILib.isGecko) { this.defaultWidth -= this.getBorderWidth("lr") + this.getPadding("lr"); this.defaultHeight -= this.getBorderWidth("tb") + this.getPadding("tb"); } - - return true; - }, - generateDOMTree: function() { - var headerRow = new ClientUI.common.box.InlineBox(null, this.contentBox.getElement()); - headerRow.getElement().addClassName("ClientUI_Grid_HR"); - headerRow.getElement().id = this.getElement().id + "HR"; - headerRow.setWidth(this.defaultWidth + 10000); - headerRow.setHeight(this.defaultHeight); - - var headerFrozenRow = new ClientUI.common.box.InlineBox(headerRow.getElement().cloneNode(true)); - headerFrozenRow.setParent(this.frozenContentBox.getElement()); - headerFrozenRow.getElement().setAttribute("id", this.getElement().id + "FRFroz"); - - var eventSepDblClick = this.eventSepDblClick.bind(this); - var eventSepMouseDown = this.eventSepMouseDown.bind(this); - var eventCellMouseDown = this.eventCellMouseDown.bind(this); - - // create all columns - var columnZIndex = this._columns.length*3 + 10; - var lastFrozenZIndex = columnZIndex; - var frozenContentBox = this.frozenContentBox; - var defaultWidth = 0; - var defaultWidthFrozen = 0; - var index = 0; - var height = headerRow.getViewportHeight(); - this._columns.each(function(columnDesc) { - var width = !Validators.isEmpty(columnDesc.width) ? columnDesc.width : 100; - - var parent = columnDesc.frozen ? headerFrozenRow.getElement() : headerRow.getElement(); - var col = new ClientUI.common.box.InlineBox(null, parent); - col.collindex = index; - col.getElement().addClassName("ClientUI_Grid_HC"); - col.getElement().columnIndex = index; - col.getElement().setStyle({zIndex: columnZIndex-1}); - if(!Validators.isEmpty(columnDesc.id)) { - col.getElement().id = columnDesc.id; - } - if(!Validators.isEmpty(columnDesc.title)) { - col.getElement().title = columnDesc.title; - } - if(!Validators.isEmpty(columnDesc.valign)) { - col.getElement().setStyle({verticalAlign: columnDesc.valign}); - } - - col.setWidth(width); - col.setHeight(height); - col.makeAbsolute(); - columnDesc.object = col; - - if(columnDesc.sortable) { - Event.observe(col.getElement(), 'click', eventCellMouseDown); - } - - if(!columnDesc.frozen) { - col.moveToX(defaultWidth); - } - else { - col.moveToX(defaultWidthFrozen); - } - - // header cell body - var colBody = new ClientUI.common.box.InlineBox(null, col.getElement()); - columnDesc.body = colBody; - if(!Validators.isEmpty(columnDesc.styleClass)) { - colBody.getElement().addClassName(columnDesc.styleClass); - } - colBody.getElement().addClassName("ClientUI_Grid_HCBody"); - - // glue cell content - var sb = new StringBuilder('<table width="100%" '); - if(!Validators.isEmpty(columnDesc.align)) { - sb.append('align="').append(columnDesc.align).append('" '); - } - sb.append('cellspacing="0" cellpadding="0" border="0"><tbody><tr><td width="100%"><span style="width:100%">'); - if(!Validators.isEmpty(columnDesc.innerHTML)) { - sb.append(columnDesc.innerHTML); - } - sb.append('</span></td><td><span class="sort-desc"></span><span class="sort-asc"></span></td></tr></tbody></table>'); - var cellContent = sb.toString(); - colBody.getElement().update(cellContent); - colBody.moveTo(0, 0); - var bodyWidth = width; - var bodyHeight = height; - if(ClientUILib.isGecko) { - bodyWidth -= colBody.getBorderWidth("lr") + colBody.getPadding("lr"); - bodyHeight -= colBody.getBorderWidth("tb") + colBody.getPadding("tb"); + var sep, column; + var seps = document.getElementsByClassName("ClientUI_Grid_HSep", this.getElement()); + for(i = 0; i<seps.length; i++) { + sep = seps[i]; + column = parseInt(sep.getAttribute("column")); + this._columns[column].sep = new ClientUI.common.box.InlineBox(sep, null, true); + sep.columnIndex = column; + if(!this._columns[column].fixedWidth) { + Event.observe(sep, 'dblclick', this.eventSepDblClick); + Event.observe(sep, 'mousedown', this.eventSepMouseDown); } - colBody.setWidth(bodyWidth); - colBody.setHeight(bodyHeight); - columnDesc.sortAsc = document.getElementsByClassName("sort-asc", colBody.getElement())[0]; - columnDesc.sortDesc = document.getElementsByClassName("sort-desc", colBody.getElement())[0]; - - // create separator between header's cells - var sep = new ClientUI.common.box.InlineBox(null, parent); - sep.getElement().addClassName("ClientUI_Grid_HSep"); - sep.makeAbsolute(); - if(!columnDesc.frozen) { - sep.moveToX(defaultWidth + width - sep.getWidth()/2 - 1); - } else { - sep.moveToX(defaultWidthFrozen + width - sep.getWidth()/2 - 1); - lastFrozenZIndex = columnZIndex; + sep.setStyle({cursor: 'auto'}); } - sep.getElement().columnIndex = index; - sep.getElement().setStyle({zIndex: columnZIndex}); - columnDesc.sep = sep; - - if(!columnDesc.fixedWidth) { - Event.observe(sep.getElement(), 'dblclick', eventSepDblClick); - Event.observe(sep.getElement(), 'mousedown', eventSepMouseDown); - } - else { - sep.getElement().setStyle({cursor: 'auto'}); - } - - columnZIndex -= 3; - if(!columnDesc.frozen) { - defaultWidth += width; - } - else { - defaultWidthFrozen += width; - } - index++; - }); + } + this.agjustSeparators(); - this.headerRow = headerRow; - this.headerFrozenRow = headerFrozenRow; - this.frozenSubstrate = new ClientUI.common.box.Substrate(null, headerFrozenRow.getElement()); - this.frozenSubstrate.getElement().name = this.getElement().id + "HRFrm"; - this.frozenSubstrate.setStyle({zIndex: lastFrozenZIndex-2}); - this.frozenSubstrate.setHeight(headerRow.getViewportHeight()); + if(ClientUILib.isIE) { + this.frozenSubstrate = new ClientUI.common.box.Substrate(null, this.getElement()); + this.frozenSubstrate.getElement().name = this.getElement().id + "HRFrm"; + Element.addClassName(this.frozenSubstrate.getElement(), "ClientUI_HRFrm"); + this.frozenSubstrate.setHeight(this.headerRow.getViewportHeight()); + } + + return true; }, - 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; + agjustSeparators: function() { + var offset = 0; + var fcnt = this.headerFrozenRow.getElement().rows[0].cells.length; + for(var i=0; i<this._columns.length; i++) { + if(i == fcnt) offset = 0; + offset += this._columns[i].width; + this._columns[i].sep.moveToX(offset - 4); } - - 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(); this.contentBox.setWidth(Math.max(this.getWidth(), totalWidth)); this.contentBox.setHeight(height); - this.contentBox.moveTo(frozenContentWidth, 0); + this.contentBox.moveTo(frozenContentWidth - this.grid.getScrollOffset(), 0); this.frozenContentBox.setWidth(frozenContentWidth); this.frozenContentBox.setHeight(height); this.frozenContentBox.moveTo(0, 0); - this.frozenSubstrate.setWidth(frozenContentWidth); - var row = this.getRow(); - row.frozen.setWidth(frozenContentWidth); - row.normal.setWidth(Math.max(this.getWidth(), totalWidth)); + if(ClientUILib.isIE) + this.frozenSubstrate.setWidth(frozenContentWidth); }, getColumns: function() { return this._columns; @@ -377,7 +316,7 @@ var pos = this.dragColumnInfo.sep.getX(); if(!this.getColumns()[index].frozen) { - pos += this.grid.getColumnsFrozenWidth() - this.grid.getColumnScrollX(index); + pos += this.grid.getColumnsFrozenWidth() - this.grid.getScrollOffset(); } this.dragColumnInfo.originalX = pos; this.columnSplitter.show(); @@ -407,24 +346,37 @@ el = el.parentNode; } - if(el && el.columnIndex>=0) { - var order = this.getColumns()[el.columnIndex].sorted; - order = (order == "asc") ? "desc" : "asc"; - this.getColumns()[el.columnIndex].sorted = order; - - for(var i = 0, len = this.getColumns().length; i < len; i++) { - var h = this.getColumns()[i]; - if(i != el.columnIndex) { - Element.setStyle(h.sortDesc, {display: 'none'}); - Element.setStyle(h.sortAsc, {display: 'none'}); - } else{ - Element.setStyle(h.sortDesc, {display: (order == 'desc' ? 'block' : 'none')}); - Element.setStyle(h.sortAsc, {display: (order == 'asc' ? 'block' : 'none')}); - } - } - - this.grid.eventOnSort.fire(el.columnIndex, order); - Event.stop(event); + if(el) { + var index = parseInt(el.getAttribute("columnIndex")); + if(index>=0) { + var dir = this.getColumns()[index].sorted; + dir = (dir == "asc") ? "desc" : "asc"; + this.getColumns()[index].sorted = dir; + + for(var i = 0, len = this.getColumns().length; i < len; i++) { + var h = this.getColumns()[i]; + if(i != index) { + Element.setStyle(h.sortDesc, {display: 'none'}); + Element.setStyle(h.sortAsc, {display: 'none'}); + } else{ + Element.setStyle(h.sortDesc, {display: (dir == 'desc' ? 'block' : 'none')}); + Element.setStyle(h.sortAsc, {display: (dir == 'asc' ? 'block' : 'none')}); + } + } + + this.grid.eventOnSort.fire({ + column: index, + order: dir, + startRow: this.grid.getBody()._getRowIndex(this.grid.getBody().templFrozen.getElement().rows[0].id), + index: this.grid.getBody().currRange.start + }); + Event.stop(event); + } } - } + }, + adjustColumnWidth: function(column, width) { + this._columns[column].col.width = width; + this._columns[column].width = width; + this.agjustSeparators(); + } }); 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-06-01 15:00:11 UTC (rev 976) +++ trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader2.js 2007-06-01 15:00:26 UTC (rev 977) @@ -362,7 +362,7 @@ this.grid.eventOnSort.fire({ column: index, order: dir, - startRow: this.grid.getBody()._getRowIndex(this.grid.getBody().templFrozen.getElement().rows[0].id), + startRow: this.grid.getBody().templFrozen.getElement().rows[0].index, index: this.grid.getBody().currRange.start }); Event.stop(event);