Author: abelevich Date: 2007-07-05 13:31:04 -0400 (Thu, 05 Jul 2007) New Revision: 1488 Added: branches/3.0.2/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/ScrollableGrid.js Removed: branches/3.0.2/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/ScrollableGrid.js Modified: branches/3.0.2/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/FakeArrayDataModel.js Log: add support for restore scroll state after submit Modified: branches/3.0.2/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/FakeArrayDataModel.js =================================================================== --- branches/3.0.2/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/FakeArrayDataModel.js 2007-07-05 17:26:39 UTC (rev 1487) +++ branches/3.0.2/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/FakeArrayDataModel.js 2007-07-05 17:31:04 UTC (rev 1488) @@ -51,9 +51,9 @@ var state_input = $(this.gridId + "_state_input"); var submit_input = $(this.gridId + "_submit_input"); // var options_input = $(this.gridId + "_options_input"); - var submit_values = state_options.count + "," + state_options.index + "," + state_options.startRow; + var submit_values = state_options.count + "," + state_options.index + "," + state_options.startRow; state_input.value = submit_values; -// options_input.value = options; +// options_input.value = options; this.curr_options = options; submit_input.click(); Deleted: branches/3.0.2/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/ScrollableGrid.js =================================================================== --- branches/3.0.2/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/ScrollableGrid.js 2007-07-05 17:26:39 UTC (rev 1487) +++ branches/3.0.2/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/ScrollableGrid.js 2007-07-05 17:31:04 UTC (rev 1488) @@ -1,171 +0,0 @@ -ClientUILib.declarePackage("ClientUI.controls.grid.ScrollableGrid"); - -ClientUI.controls.grid.ScrollableGrid = Class.create({ - CLASSDEF: { - name: 'ClientUI.controls.grid.ScrollableGrid', - parent: ClientUI.controls.grid.Grid - } -}); - -Object.extend(ClientUI.controls.grid.ScrollableGrid.prototype, { - /** - * Occured when scroll position adjusted - */ - eventOnPostScroll: {}, - - /** - * Occured when sorting adjusted - */ - eventOnPostSort: {}, - - initialize: function(options) { - this.startInitTime = (new Date()).getTime(); - - this.options = options; - this.client_id = this.options.client_id; - this.rows_count = $(this.client_id + "_rows_input").value; - this.columns_count = this.options.columnsCount; - this.splash_id = this.options.splash_id; - this.dataModel = new ClientUI.controls.grid.FakeArrayDataModel(this.rows_count, this.columns_count, this.client_id); - - this.templates = [ - {pane: GridLayout_Enum.HEADER, ref: this.client_id +"_" + "GridHeaderTemplate"}, - {pane: GridLayout_Enum.BODY, ref: this.client_id +"_" + "GridBodyTemplate"}, - {pane: GridLayout_Enum.FOOTER, ref: this.client_id +"_" + "GridFooterTemplate"} - ]; - var grid = this; - - Event.onReady(function(){ - grid.init(); - }); - /*Utils.execOnLoad( - function(){ - grid.init(); - }, - Utils.Condition.ElementPresent(grid.client_id), 100);*/ - - this.endInitTime = (new Date()).getTime(); - this.rowCallbacks = []; - }, - -// initialize parent Grid - - init: function(){ - // mark that grid control initialized - if(!this.isInitialized) { - this.isInitialized = true; - - this.startCreateTime = (new Date()).getTime(); - - ClientUI.controls.grid.ScrollableGrid.parentClass.constructor().call(this, this.client_id, this.dataModel, this.templates); - - this.endCreateTime = (new Date()).getTime(); - - // suspend some processing - setTimeout(function() { - this.startPostProcessTime = (new Date()).getTime(); - - this.eventOnPostSort = new ClientUI.common.utils.CustomEvent('OnSort'); - this.eventOnPostScroll = new ClientUI.common.utils.CustomEvent('OnScroll'); - - //var progress = new ClientUI.common.box.SplashBox(this.splash_id, null, 300, true); - //this.setProgressCtrl(progress); - Event.observe(this.eventOnSort, "on sort", this.onSorted.bindAsEventListener(this)); - if (this.options.selectionInput) { - this.selectionManager = new ClientUI.controls.grid.SelectionManager(this); - } - - this.endPostProcessTime = (new Date()).getTime(); - }.bind(this), 500); - } - }, - - onSortComplete : function(request, event, data){ - var options = request.getJSON("options"); - Utils.AJAX.updateRows(options,request, - this,this.client_id, - [this.updateSelectionCallBack], - [function(){ - this.selectionManager.restoreState(); - this.eventOnPostSort.fire(options.column, options.order); - }]); - }, - onScrollComplete : function(request, event, data){ - var options = this.dataModel.getCurrentOptions(); - window.loadingServerTime = (new Date()).getTime(); - Utils.AJAX.updateRows(options,request, - this,this.client_id, - [this.updateSelectionCallBack], - [function(){ - this.selectionManager.restoreState(); - this.eventOnPostScroll.fire(this.getBody().currRange.start); - }]); - - window.loadingEndTime = (new Date()).getTime(); - - // TODO: remove this time statistic logging - ClientUILib.log(ClientUILogger.ERROR, "Total time of data loading of "+options.count+" rows is: " + (window.loadingEndTime - window.loadingStartTime) + " miliseconds."); - ClientUILib.log(ClientUILogger.WARNING, "...Server load time: " + (window.loadingServerTime - window.loadingStartTime)); - ClientUILib.log(ClientUILogger.WARNING, "...DOM updated time: " + (window.loadingUpdateTime - window.loadingServerTime)); - ClientUILib.log(ClientUILogger.WARNING, "...Grid invalidation time: " + (window.loadingInvalidateTime - window.loadingUpdateTime)); - ClientUILib.log(ClientUILogger.WARNING, "...Selection mng time: " + (window.loadingEndTime - window.loadingInvalidateTime)); - }, - - onSorted: function(sortEvent) { - this.options.onSortAjaxUpdate(sortEvent); - }, - - updateSelectionCallBack: function(argMap) { - if (this.selectionManager) { - this.selectionManager.addListener(argMap.row, argMap.index); - } - }, - - setSizes: function(width, height) { - var style = this.element.style; - style.width = width +"px"; - style.height = height +"px"; - this.updateLayout(); - }, - - doCollapse: function(index) { - var header = this.getHeader(); - var flength = header.headerFrozenRow.getElement().rows[0].cells.length; - var nlength = header.headerRow.getElement().rows[0].cells.length; - if(index < flength + nlength - 1) { - var frozen = true; - if(index >= flength) { - index -= fcount; - frozen = false; - } - this.hideColumn(index, frozen); - } - }, - - hideColumn: function(index, frozen) { - this.getHeader().hideColumn(index, frozen); - this.getBody().hideColumn(index, frozen); - if(this.getFooter()) {this.getFooter().hideColumn(index, frozen);} - this.updateLayout(); - }, - - restoreScrollState: function(state, start, end) { - this.getBody().scrollBox.getElement().scrollTop = state.pos; - this.getBody().currentPos = state.pos; - this.getBody().setScrollPos(state.pos); - this.getBody().currRange.start == start; - this.getBody().currRange.end = end; - }, - - getScrollPos: function() { - return this.getBody().currentPos; - } -}); - - - - - - - - Added: branches/3.0.2/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/ScrollableGrid.js =================================================================== --- branches/3.0.2/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/ScrollableGrid.js (rev 0) +++ branches/3.0.2/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/ScrollableGrid.js 2007-07-05 17:31:04 UTC (rev 1488) @@ -0,0 +1,193 @@ +ClientUILib.declarePackage("ClientUI.controls.grid.ScrollableGrid"); + +ClientUI.controls.grid.ScrollableGrid = Class.create({ + CLASSDEF: { + name: 'ClientUI.controls.grid.ScrollableGrid', + parent: ClientUI.controls.grid.Grid + } +}); + +Object.extend(ClientUI.controls.grid.ScrollableGrid.prototype, { + /** + * Occured when scroll position adjusted + */ + eventOnPostScroll: {}, + + /** + * Occured when sorting adjusted + */ + eventOnPostSort: {}, + + initialize: function(options) { + this.startInitTime = (new Date()).getTime(); + + this.options = options; + this.client_id = this.options.client_id; + this.rows_count = $(this.client_id + "_rows_input").value; + this.scroll_si = $(this.client_id + ":si"); + this.columns_count = this.options.columnsCount; + this.splash_id = this.options.splash_id; + this.dataModel = new ClientUI.controls.grid.FakeArrayDataModel(this.rows_count, this.columns_count, this.client_id); + + this.templates = [ + {pane: GridLayout_Enum.HEADER, ref: this.client_id +"_" + "GridHeaderTemplate"}, + {pane: GridLayout_Enum.BODY, ref: this.client_id +"_" + "GridBodyTemplate"}, + {pane: GridLayout_Enum.FOOTER, ref: this.client_id +"_" + "GridFooterTemplate"} + ]; + var grid = this; + + Event.onReady(function(){ + grid.init(); + }); + /*Utils.execOnLoad( + function(){ + grid.init(); + }, + Utils.Condition.ElementPresent(grid.client_id), 100);*/ + + this.endInitTime = (new Date()).getTime(); + this.rowCallbacks = []; + }, + +// initialize parent Grid + + init: function(){ + // mark that grid control initialized + if(!this.isInitialized) { + this.isInitialized = true; + this.startCreateTime = (new Date()).getTime(); + + ClientUI.controls.grid.ScrollableGrid.parentClass.constructor().call(this, this.client_id, this.dataModel, this.templates); + + this.endCreateTime = (new Date()).getTime(); + + // suspend some processing + setTimeout(function() { + this.startPostProcessTime = (new Date()).getTime(); + + this.eventOnPostSort = new ClientUI.common.utils.CustomEvent('OnSort'); + this.eventOnPostScroll = new ClientUI.common.utils.CustomEvent('OnScroll'); + + //var progress = new ClientUI.common.box.SplashBox(this.splash_id, null, 300, true); + //this.setProgressCtrl(progress); + Event.observe(this.eventOnSort, "on sort", this.onSorted.bindAsEventListener(this)); + if (this.options.selectionInput) { + this.selectionManager = new ClientUI.controls.grid.SelectionManager(this); + } + + this.endPostProcessTime = (new Date()).getTime(); + }.bind(this), 500); + + if(this.scroll_si.value !=''){ + var options = this.scroll_si.value.split(','); + this.restoreScrollState(options[0],options[1],options[2]); + } + Event.observe(document.body, "submit",this.restoreScrollPos.bindAsEventListener(this)); + } + }, + + onSortComplete : function(request, event, data){ + var options = request.getJSON("options"); + Utils.AJAX.updateRows(options,request, + this,this.client_id, + [this.updateSelectionCallBack], + [function(){ + this.selectionManager.restoreState(); + this.eventOnPostSort.fire(options.column, options.order); + }]); + }, + onScrollComplete : function(request, event, data){ + var options = this.dataModel.getCurrentOptions(); + window.loadingServerTime = (new Date()).getTime(); + Utils.AJAX.updateRows(options,request, + this,this.client_id, + [this.updateSelectionCallBack], + [function(){ + this.selectionManager.restoreState(); + this.eventOnPostScroll.fire(this.getBody().currRange.start); + }]); + + window.loadingEndTime = (new Date()).getTime(); + + // TODO: remove this time statistic logging + ClientUILib.log(ClientUILogger.ERROR, "Total time of data loading of "+options.count+" rows is: " + (window.loadingEndTime - window.loadingStartTime) + " miliseconds."); + ClientUILib.log(ClientUILogger.WARNING, "...Server load time: " + (window.loadingServerTime - window.loadingStartTime)); + ClientUILib.log(ClientUILogger.WARNING, "...DOM updated time: " + (window.loadingUpdateTime - window.loadingServerTime)); + ClientUILib.log(ClientUILogger.WARNING, "...Grid invalidation time: " + (window.loadingInvalidateTime - window.loadingUpdateTime)); + ClientUILib.log(ClientUILogger.WARNING, "...Selection mng time: " + (window.loadingEndTime - window.loadingInvalidateTime)); + }, + + onSorted: function(sortEvent) { + this.options.onSortAjaxUpdate(sortEvent); + }, + + updateSelectionCallBack: function(argMap) { + if (this.selectionManager) { + this.selectionManager.addListener(argMap.row, argMap.index); + } + }, + + setSizes: function(width, height) { + var style = this.element.style; + style.width = width +"px"; + style.height = height +"px"; + this.updateLayout(); + }, + + doCollapse: function(index) { + var header = this.getHeader(); + var flength = header.headerFrozenRow.getElement().rows[0].cells.length; + var nlength = header.headerRow.getElement().rows[0].cells.length; + if(index < flength + nlength - 1) { + var frozen = true; + if(index >= flength) { + index -= fcount; + frozen = false; + } + this.hideColumn(index, frozen); + } + }, + + hideColumn: function(index, frozen) { + this.getHeader().hideColumn(index, frozen); + this.getBody().hideColumn(index, frozen); + if(this.getFooter()) {this.getFooter().hideColumn(index, frozen);} + this.updateLayout(); + }, + + restoreScrollState: function(scrollPos, start, end) { + debugger; + var body = this.getBody(); + body.scrollBox.getElement().scrollTop = scrollPos; + body.currentPos = scrollPos; + body.currRange.start = start; + body.currRange.end = end; + body._onContentVScroll(scrollPos); + var visibleRowPos = body.currRange.start * body.defaultRowHeight; + //setTimeout(function(){ + body.templFrozen.moveToY(visibleRowPos); + body.templNormal.moveToY(visibleRowPos); + //}, 500); + }, + + getScrollPos: function() { + return this.getBody().currentPos; + }, + + restoreScrollPos: function(){ + //debugger; + var body = this.getBody(); + var start = body.currRange.start; + var end = body.currRange.end; + var index = this.getScrollPos(); + this.scroll_si.value = index + "," + start + "," + end; + } +}); + + + + + + + +