12:57 p.m.
Author: abelevich
Date: 2007-05-23 13:57:35 -0400 (Wed, 23 May 2007)
New Revision: 855
Added:
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/common/box/SplashBox.js
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js
Removed:
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js
Modified:
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/common/utils/StringBuilder.js
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader2.js
trunk/sandbox/scrollable-grid/src/main/resources/org/richfaces/renderkit/html/css/grid.xcss
trunk/sandbox/scrollable-grid/src/main/templates/org/richfaces/scrollable-grid-header-cell.jspx
trunk/sandbox/scrollable-grid/src/main/templates/org/richfaces/scrollable-grid.jspx
Log:
Added: trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/common/box/SplashBox.js
===================================================================
--- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/common/box/SplashBox.js
(rev 0)
+++
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/common/box/SplashBox.js 2007-05-23
17:57:35 UTC (rev 855)
@@ -0,0 +1,98 @@
+/**
+ * InlineBox.js Date created: 6.04.2007
+ * Copyright (c) 2007 Exadel Inc.
+ * @author Denis Morozov <dmorozov(a)exadel.com>
+ */
+ClientUILib.declarePackage("ClientUI.common.box.SplashBox");
+
+ClientUILib.requireClass("ClientUI.common.box.Box");
+ClientUILib.requireClass("ClientUI.common.box.Substrate");
+
+/**
+ * Base class that wrap work with inline blocks like span
+ */
+ClientUI.common.box.SplashBox = Class.create({
+ CLASSDEF: {
+ name: 'ClientUI.common.box.SplashBox',
+ parent: ClientUI.common.box.Box
+ }
+});
+
+Object.extend(ClientUI.common.box.SplashBox.prototype, {
+
+ initialize: function(text, parentElement, zIndex, supressSplash) {
+ ClientUI.common.box.SplashBox.parentClass.constructor().call(this, null,
parentElement);
+ this.zIndex = zIndex || 500;
+ this.supressSplash = supressSplash || false;
+ this.hide();
+ this.createControl(text);
+ },
+ createControl: function(text) {
+ this.element.setStyle({zIndex: this.zIndex});
+ this.makeAbsolute();
+
+ this.frame = new ClientUI.common.box.Substrate(null, this.getElement());
+ this.frame.getElement().setStyle({zIndex: this.zIndex + 1});
+ this.frame.getElement().setStyle({backgroundColor: "#FFFFFF"});
+ this.frame.getElement().setStyle({border: "medium none"});
+ this.frame.getElement().setStyle({opacity: "0"});
+ this.frame.moveTo(0, 0);
+ this.frame.setWidth(this.getWidth());
+ this.frame.setHeight(this.getHeight());
+
+ if(!this.supressSplash) {
+ this.div = new ClientUI.common.box.Box(null, this.getElement());
+ this.div.getElement().setStyle({zIndex: this.zIndex + 2});
+ this.div.getElement().setStyle({backgroundColor: "#000000"});
+ this.div.getElement().setStyle({opacity: "0.6"});
+ this.div.makeAbsolute();
+ this.div.moveTo(0, 0);
+ this.div.setWidth(this.getWidth());
+ this.div.setHeight(this.getHeight());
+ this.div.show();
+ }
+
+ this.text = new ClientUI.common.box.Box(text, this.getElement());
+ this.text.setParent(this.getElement());
+ this.text.getElement().setStyle({zIndex: this.zIndex + 100});
+ if(!text)
+ this.text.getElement().innerHTML = "<font size='4'
color='white'>Loading...</font>";
+ this.text.makeAbsolute();
+ this.text.show();
+ },
+ setSize: function(width, height) {
+ this.setWidth(width);
+ this.setHeight(height);
+ },
+ setImage: function(image) {
+ if(!this.img) {
+ this.img = new ClientUI.common.box.Box($(document.createElement("img")),
this.div.getElement());
+ this.img.makeAbsolute();
+ }
+ this.img.getElement().src = image;
+ this.text.hide();
+ },
+ updateLayout: function() {
+ var width = this.getWidth();
+ var height = this.getHeight();
+
+ this.frame.setWidth(width);
+ this.frame.setHeight(height);
+
+ if(!this.supressSplash) {
+ this.div.setWidth(width);
+ this.div.setHeight(height);
+ }
+
+ if(this.img) {
+ var x = width/2 - this.img.getWidth()/2;
+ var y = height/2 - this.img.getHeight()/2;
+ this.img.moveTo(x, y);
+ }
+ else {
+ var x = width/2 - this.text.getWidth()/2;
+ var y = height/2 - this.text.getHeight()/2;
+ this.text.moveTo(x, y);
+ }
+ }
+});
Modified:
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/common/utils/StringBuilder.js
===================================================================
---
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/common/utils/StringBuilder.js 2007-05-23
17:56:43 UTC (rev 854)
+++
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/common/utils/StringBuilder.js 2007-05-23
17:57:35 UTC (rev 855)
@@ -56,6 +56,10 @@
this.length = s.length;
return this._string = s;
+ },
+
+ clean: function(str) {
+ this.initialize();
}
});
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-23
17:56:43 UTC (rev 854)
+++
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/Grid2.js 2007-05-23
17:57:35 UTC (rev 855)
@@ -186,6 +186,9 @@
for(var i=0; i<columns.length; i++) {
this.adjustColumnWidth(i, columns[i].width);
}
+ },
+ setProgressCtrl: function(ctrl) {
+ this.getBody().setProgressCtrl(ctrl);
}
})
Deleted:
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-23
17:56:43 UTC (rev 854)
+++
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js 2007-05-23
17:57:35 UTC (rev 855)
@@ -1,524 +0,0 @@
-/*
- * TODO: Copyright (c) 2007 Denis Morozov <dmorozov(a)exadel.com>
- *
- * ...
- */
-ClientUILib.declarePackage("ClientUI.controls.grid.GridBody");
-
-ClientUILib.requireClass("ClientUI.common.box.Box");
-
-/*
- * GridHeader.js - Grid control header pane
- * TODO: add comments
- */
-ClientUI.controls.grid.GridBody = Class.create({
- CLASSDEF: {
- name: 'ClientUI.controls.grid.GridBody',
- parent: ClientUI.common.box.Box
- }
-
-});
-
-Object.extend(ClientUI.controls.grid.GridBody.prototype, {
- /**
- * Count of rows can be viewed in the same time in grid
- */
- dataVisible: 50,
-
- /**
- * Count of rows loaded additianally to dataVisible rows
- */
- dataDelta: 5,
-
- /**
- * Current data position
- */
- currentPos: 0,
-
- /**
- * Constructor
- * @param {Object} template for Grid body row
- * @param {Object} grid parent grid object
- */
- initialize: function(template, grid) {
- this.grid = grid;
- ClientUI.controls.grid.GridBody.parentClass.constructor().call(this, template);
-
- // declare event listeners
- this._eventOnHScroll = this._onContentHScroll.bind(this);
- this._eventOnVScroll = this._onContentVScroll.bind(this);
- this._eventOnDataReady = this._onDataReady.bind(this);
-
- this.createControl(template);
- this.registerEvents();
- this.updateLayout();
- },
- 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);
- },
- _onDataReady: function(options) {
- // load rows data
- var currTime = (new Date()).getTime();
- /*
- var loadRow = this.loadRow.bind(this);
- var byIndex = options.indexes!==null;
- var count = options.indexes!==null ? options.indexes.length :
(options.ids!==null?options.ids.lenth : 0);
- for(var i=0; i<count; i++) {
- loadRow(
- options.indexes!==null ? options.indexes[i] : null,
- options.ids!==null ? options.ids[i] : null);
- }
-
- // This trick to force IE rerender rows
- if(ClientUILib.isIE && !ClientUILib.isIE7) {
- this.setScrollPos(this.currentPos);
- }
- */
-
- ClientUILib.log(ClientUILogger.ERROR, "data for "+options.count+" rows
loaded over: " + ((new Date()).getTime() - currTime) + " miliseconds.");
- ClientUILib.log(ClientUILogger.WARNING, "start index: " + options.index +
", and startRow: " + options.startRow);
- ClientUILib.log(ClientUILogger.WARNING, "load data delta time: " +
(this.taskStartTime - this.taskDefineTime));
- ClientUILib.log(ClientUILogger.WARNING, "data prepare time: " +
(this.taskStartLoadingTime - this.taskStartTime));
- },
- _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);
- },
- createControl: function(template) {
-
- 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;
- }
- }
-
- // 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 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];
- }
- }
-
- if(!normal || !frozen) {
- errMsg = "Unable to parse template for GridBody. 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();
-
-
- this.helpObject1 = new
ClientUI.common.box.Box($(document.createElement("img")),
this.contentBox.getElement());
- this.helpObject1.setWidth(10);
- this.helpObject1.setHeight(10);
- this.helpObject1.makeAbsolute();
- this.helpObject2 = new
ClientUI.common.box.Box($(document.createElement("img")),
this.frozenContentBox.getElement());
- this.helpObject2.setWidth(10);
- this.helpObject2.setHeight(10);
- this.helpObject2.makeAbsolute();
-
-
- // create row template
- var ch = this.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());
- this.controlCreated = true;
- },
- parseTemplate: function(templFrozen, templNormal) {
- if(!templNormal || !templNormal.rows || templNormal.rows.length===0) {
- return false;
- }
-
- this.rowsCount = templNormal.rows.length;
- this.defaultRowHeight = Element.getHeight(templNormal.rows[0].cells[0]);
- if(ClientUILib.isGecko) {
- this.defaultRowHeight -= this.getBorderWidth("tb") +
this.getPadding("tb");
- }
- for(var i=0; i<this.rowsCount; i++) {
- templFrozen.rows[i].index = i;
- templNormal.rows[i].index = i;
- }
- 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;
- },
- setScrollPos: function(pos) {
- this.contentBox.getElement().scrollTop = pos;
- this.frozenContentBox.getElement().scrollTop = pos;
- if(ClientUILib.isIE && !ClientUILib.isIE7) {
- this.contentBox.getElement().scrollTop = pos;
- this.frozenContentBox.getElement().scrollTop = pos;
- }
- },
- updateLayout: function() {
- if(!this.controlCreated || !this.grid.controlCreated) {
- return;
- }
- ClientUI.controls.grid.GridBody.parentClass.method("updateLayout").call(this);
- 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 frozenContentWidth = this.grid.getColumnsFrozenWidth();
-
- 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);
-
- this.container.setWidth(totalWidth + 100);
- this.contentBox.setWidth(this.scrollBox.getViewportWidth()-frozenContentWidth);
- this.contentBox.setHeight(height - fixH);
- this.frozenContentBox.setWidth(frozenContentWidth);
- this.frozenContentBox.setHeight(height - fixH);
-
- var scrollPos = Math.min(totalWidth - frozenContentWidth - this.contentBox.getWidth(),
scrollLeft);
- this.grid.adjustScrollPosition(scrollPos);
-
- this.dataVisible = parseInt(this.contentBox.getHeight() / this.defaultRowHeight, 10) +
1;
- this.dataVisible = Math.min(this.dataVisible, this.rowsCount);
- //this.dataVisible = this.rowsCount;
- if(height > 0) {
- this.adjustDataPosition(this.currentPos);
- }
- },
- adjustScrollPosition: function(pos) {
- this.contentBox.getElement().scrollLeft = pos;
- },
- getScrollXPosition: function() {
- return this.contentBox.getElement().scrollLeft;
- },
- getScrollYPosition: function() {
- return this.contentBox.getElement().scrollTop;
- },
- adjustDataPosition: function (pos) {
- if(this.currentPos == pos) {
- return;
- }
-
- // 1. calculate direction and range to load next data
- var forwardDir = (this.currentPos <= pos) ? true : false;
- 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 - (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) {
- ClientUILib.log(ClientUILogger.WARNING, "!!! GridBody: adjustDataPosition. Pos:
" + pos + ", From:" + from + ", To:" + to);
- return;
- }
-
- // stop timed adjusting
- var task = this._getPendingTask();
- if(to - from > 0) {
- task.timer = null;
- task.from = from;
- task.to = to;
- this._setPendingTask(task);
- }
- },
- _getPendingTask: function() {
- if(!this.pendingTask) {
- this.pendingTask = {
- timer: null,
- rowsToLoad: [],
- rowsToLoadIdx: [],
- from: 0,
- to: 0
- };
- }
- else {
- if(this.pendingTask.timer) {
- clearTimeout(this.pendingTask.timer);
- this.pendingTask.timer = null;
- }
-
- }
- return this.pendingTask;
- },
- _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
- // in other case just move rows table to first position
- var switchRows = true;
- if(this.currRange.end < range.start
- || this.currRange.start > range.end) {
- switchRows = false;
- }
-
- if(!switchRows) {
- this.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;
- this.templFrozen.moveToY(pos);
- this.templNormal.moveToY(pos);
- }
- else {
- var i, row, rownew, cloned;
- this.countToLoad = 0;
- var frozenTbl = this.templFrozen.getElement();
- 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.rowsCount - this.countToLoad);
-
- // store visible row pos to restore after rows reerrange
- var visibleRowPos = this.templFrozen.getY() + this.countToLoad *
this.defaultRowHeight;
-
- 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(-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(-1);
- rownew.parentNode.replaceChild(cloned,rownew);
- }
-
- this.templFrozen.moveToY(visibleRowPos);
- 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 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);
- }
-
- for(i=0; i<frows.length; i++) {
- row = frows[i];
- rownew = frozenTbl.insertRow(0);
- rownew.parentNode.replaceChild(row, rownew);
-
- 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.taskStartLoadingTime = (new Date()).getTime();
-
- // 4. start data loading
- if(this.countToLoad > 0) {
- this.grid.dataModel.loadRows({
- index: this.startIndex,
- count: this.countToLoad,
- startRow: this.startRow});
- }
-
- this.currRange = range;
- }.bind(this), 150/*this.grid.dataModel.getRequestDelay()*/);
- },
-
- /**
- * show hiden rows after loading them from datasource
- * @param {Object} options
- */
- invalidate: function(options) {
- // TODO: implement invalidate for body !!
- },
-
- /**
- * prepare rows for data reload
- * i.e. hide and set new ids for content elements
- */
- prepareRows: function(start, end, startIndex) {
- // this.rowsCount
- //this.templFrozen.moveToY(pos);
- //this.templNormal.moveToY(pos);
- }
-});
Added:
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js
===================================================================
--- trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js
(rev 0)
+++
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridBody2.js 2007-05-23
17:57:35 UTC (rev 855)
@@ -0,0 +1,518 @@
+/*
+ * TODO: Copyright (c) 2007 Denis Morozov <dmorozov(a)exadel.com>
+ *
+ * ...
+ */
+ClientUILib.declarePackage("ClientUI.controls.grid.GridBody");
+
+ClientUILib.requireClass("ClientUI.common.box.Box");
+ClientUILib.requireClass("ClientUI.common.box.SplashBox");
+
+/*
+ * GridHeader.js - Grid control header pane
+ * TODO: add comments
+ */
+ClientUI.controls.grid.GridBody = Class.create({
+ CLASSDEF: {
+ name: 'ClientUI.controls.grid.GridBody',
+ parent: ClientUI.common.box.Box
+ }
+
+});
+
+Object.extend(ClientUI.controls.grid.GridBody.prototype, {
+ /**
+ * Count of rows can be viewed in the same time in grid
+ */
+ dataVisible: 50,
+
+ /**
+ * Count of rows loaded additianally to dataVisible rows
+ */
+ dataDelta: 5,
+
+ /**
+ * Current data position
+ */
+ currentPos: 0,
+
+ /**
+ * Constructor
+ * @param {Object} template for Grid body row
+ * @param {Object} grid parent grid object
+ */
+ initialize: function(template, grid) {
+ this.grid = grid;
+ ClientUI.controls.grid.GridBody.parentClass.constructor().call(this, template);
+
+ // declare event listeners
+ this._eventOnHScroll = this._onContentHScroll.bind(this);
+ this._eventOnVScroll = this._onContentVScroll.bind(this);
+ this._eventOnDataReady = this._onDataReady.bind(this);
+
+ this.createControl(template);
+ this.registerEvents();
+ this.updateLayout();
+ },
+ 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);
+ },
+ createControl: function(template) {
+
+ 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;
+ }
+ }
+
+ // 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 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];
+ }
+ }
+
+ if(!normal || !frozen) {
+ errMsg = "Unable to parse template for GridBody. 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();
+
+
+ this.helpObject1 = new
ClientUI.common.box.Box($(document.createElement("img")),
this.contentBox.getElement());
+ this.helpObject1.setWidth(10);
+ this.helpObject1.setHeight(10);
+ this.helpObject1.makeAbsolute();
+ this.helpObject2 = new
ClientUI.common.box.Box($(document.createElement("img")),
this.frozenContentBox.getElement());
+ this.helpObject2.setWidth(10);
+ this.helpObject2.setHeight(10);
+ this.helpObject2.makeAbsolute();
+
+
+ // create row template
+ var ch = this.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());
+ this.controlCreated = true;
+ },
+ parseTemplate: function(templFrozen, templNormal) {
+ if(!templNormal || !templNormal.rows || templNormal.rows.length===0) {
+ return false;
+ }
+
+ this.rowsCount = templNormal.rows.length;
+ this.defaultRowHeight = Element.getHeight(templNormal.rows[0].cells[0]);
+ if(ClientUILib.isGecko) {
+ this.defaultRowHeight -= this.getBorderWidth("tb") +
this.getPadding("tb");
+ }
+ for(var i=0; i<this.rowsCount; i++) {
+ templFrozen.rows[i].index = i;
+ templNormal.rows[i].index = i;
+ }
+ 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;
+ },
+ setScrollPos: function(pos) {
+ this.contentBox.getElement().scrollTop = pos;
+ this.frozenContentBox.getElement().scrollTop = pos;
+ if(ClientUILib.isIE && !ClientUILib.isIE7) {
+ this.contentBox.getElement().scrollTop = pos;
+ this.frozenContentBox.getElement().scrollTop = pos;
+ }
+ },
+ updateLayout: function() {
+ if(!this.controlCreated || !this.grid.controlCreated) {
+ return;
+ }
+ ClientUI.controls.grid.GridBody.parentClass.method("updateLayout").call(this);
+ 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 frozenContentWidth = this.grid.getColumnsFrozenWidth();
+
+ 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);
+
+ this.container.setWidth(totalWidth + 100);
+ this.contentBox.setWidth(this.scrollBox.getViewportWidth()-frozenContentWidth);
+ this.contentBox.setHeight(height - fixH);
+ this.frozenContentBox.setWidth(frozenContentWidth);
+ this.frozenContentBox.setHeight(height - fixH);
+
+ var scrollPos = Math.min(totalWidth - frozenContentWidth - this.contentBox.getWidth(),
scrollLeft);
+ this.grid.adjustScrollPosition(scrollPos);
+
+ this.dataVisible = parseInt(this.contentBox.getHeight() / this.defaultRowHeight, 10) +
1;
+ this.dataVisible = Math.min(this.dataVisible, this.rowsCount);
+ //this.dataVisible = this.rowsCount;
+ if(height > 0) {
+ this.adjustDataPosition(this.currentPos);
+ }
+ },
+ adjustScrollPosition: function(pos) {
+ this.contentBox.getElement().scrollLeft = pos;
+ },
+ getScrollXPosition: function() {
+ return this.contentBox.getElement().scrollLeft;
+ },
+ getScrollYPosition: function() {
+ return this.contentBox.getElement().scrollTop;
+ },
+ adjustDataPosition: function (pos) {
+ if(this.currentPos == pos) {
+ return;
+ }
+
+ // 1. calculate direction and range to load next data
+ var forwardDir = (this.currentPos <= pos) ? true : false;
+ this.currentPos = pos;
+
+ // 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() - 1);
+ var range = $R(from, to);
+
+ if(from >= to) {
+ ClientUILib.log(ClientUILogger.WARNING, "!!! GridBody: adjustDataPosition. Pos:
" + pos + ", From:" + from + ", To:" + to);
+ return;
+ }
+
+ var task = this._getPendingTask();
+ if(to - from > 0) {
+ task.timer = null;
+ task.from = from;
+ task.to = to;
+ task.first = first;
+ this._setPendingTask(task);
+ }
+ },
+ _getPendingTask: function() {
+ if(!this.pendingTask) {
+ this.pendingTask = {
+ timer: null,
+ rowsToLoad: [],
+ rowsToLoadIdx: [],
+ from: 0,
+ to: 0,
+ first: 0
+ };
+ }
+ return this.pendingTask;
+ },
+ _setPendingTask: function(task) {
+ clearTimeout(this.pendingTask.timer);
+ this.pendingTask = task;
+
+ // and plan other agjusting over the time
+ task.timer = setTimeout(function() {
+ this.startLoadData();
+ }.bind(this), this.grid.dataModel.getRequestDelay());
+ },
+ 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.updateStarted) return;
+
+ this.taskStartTime = (new Date()).getTime();
+
+ var task = this._getPendingTask();
+ var range = $R(task.from, task.to);
+ var switchType = 5;
+ var startIndex = 0;
+ var startRow = 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) {
+ startRow = this.templFrozen.getElement().rows[0].index;
+ 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) {
+ startRow = frozenTbl.rows[0].index;
+ startIndex = this.currRange.end;
+ }
+ }
+ else {
+ switchType = 2;
+ countToLoad = this.currRange.start - range.start;
+ if(countToLoad > 0) {
+ startIndex = range.start;
+ var restCount = this.rowsCount - countToLoad;
+ startRow = frozenTbl.rows[restCount].index;
+ }
+ }
+ }
+
+ 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...");
+ this.showSplash();
+
+ this.taskDefineTime = (new Date()).getTime();
+ var task = this._getPendingTask();
+ // Make timer to handle quick clicks on scrollbar arrows
+ task.timer = setTimeout(function() {
+
+ // 4. start data loading
+ //this.container.hide();
+ //Element.setStyle(this.container.getElement(), {visibility: "hidden"});
+
+ screen.updateInterval = 1000;
+
+ this.grid.dataModel.loadRows({
+ index: startIndex,
+ count: countToLoad,
+ startRow: startRow,
+ switchType: switchType});
+
+ this.currRange = range;
+ }.bind(this), 10);
+ }
+ },
+
+ 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();
+ },
+
+ /**
+ * show hiden rows after loading them from datasource
+ * @param {Object} options
+ */
+ invalidate: function(options) {
+
+ //Element.setStyle(this.container.getElement(), {visibility: "inherit"});
+ //this.container.show();
+
+ ClientUILib.log(ClientUILogger.WARNING, "Stop loading.");
+ var frozenTbl = this.templFrozen.getElement();
+ var normalTbl = this.templNormal.getElement();
+
+ if(options.switchType === 0) {
+ var pos = this.defaultRowHeight * options.index;
+ this.templFrozen.moveToY(pos);
+ this.templNormal.moveToY(pos);
+ }
+ else if(options.switchType === 1 || options.switchType === 2) {
+ // store visible row pos to restore after rows reerrange
+ var visibleRowPos = 0;
+ var count = frozenTbl.rows.length;
+ var frows = new Array(count), nrows = new Array(count);
+ var j = 0;
+
+ if(options.switchType === 1) {
+ visibleRowPos = this.templFrozen.getY() + options.count * this.defaultRowHeight;
+ 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];
+ j++;
+ }
+ }
+ else {
+ visibleRowPos = options.index * this.defaultRowHeight;
+ for(i=this.rowsCount - options.count; i<this.rowsCount; i++) {
+ frows[j] = frozenTbl.rows[i];
+ nrows[j] = normalTbl.rows[i];
+ 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);
+ }
+
+ if(options.switchType === 2) {
+ this.templFrozen.moveToY(visibleRowPos);
+ this.templNormal.moveToY(visibleRowPos);
+ }
+
+ // 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);
+ }
+
+ if(options.switchType === 1) {
+ this.templFrozen.moveToY(visibleRowPos);
+ this.templNormal.moveToY(visibleRowPos);
+ }
+ }
+
+ screen.updateInterval = 0;
+ this.splash.hide();
+ this.updateStarted = false;
+ }
+});
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-23
17:56:43 UTC (rev 854)
+++
trunk/sandbox/scrollable-grid/src/main/javascript/ClientUI/controls/grid/GridHeader2.js 2007-05-23
17:57:35 UTC (rev 855)
@@ -151,6 +151,12 @@
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) {
+ Element.setStyle(columns[i].sortDesc, {left: "-10px"});
+ Element.setStyle(columns[i].sortAsc, {left: "-10px"});
+ }
i++;
});
@@ -177,6 +183,12 @@
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) {
+ Element.setStyle(columns[i].sortDesc, {left: "-10px"});
+ Element.setStyle(columns[i].sortAsc, {left: "-10px"});
+ }
i++;
});
@@ -328,24 +340,27 @@
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 order = this.getColumns()[index].sorted;
+ order = (order == "asc") ? "desc" : "asc";
+ this.getColumns()[index].sorted = order;
+
+ 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: (order == 'desc' ? 'block' :
'none')});
+ Element.setStyle(h.sortAsc, {display: (order == 'asc' ? 'block' :
'none')});
+ }
+ }
+
+ this.grid.eventOnSort.fire(index, order);
+ Event.stop(event);
+ }
}
},
_getVisibleHeaderControls: function() {
Modified:
trunk/sandbox/scrollable-grid/src/main/resources/org/richfaces/renderkit/html/css/grid.xcss
===================================================================
---
trunk/sandbox/scrollable-grid/src/main/resources/org/richfaces/renderkit/html/css/grid.xcss 2007-05-23
17:56:43 UTC (rev 854)
+++
trunk/sandbox/scrollable-grid/src/main/resources/org/richfaces/renderkit/html/css/grid.xcss 2007-05-23
17:57:35 UTC (rev 855)
@@ -96,6 +96,7 @@
display: none;
height: 14px;
width: 16px;
+ position: relative;
}
.ClientUI_Grid_HC .sort-desc {
@@ -105,6 +106,7 @@
display: none;
height: 14px;
width: 16px;
+ position: relative;
}
/**
@@ -119,7 +121,7 @@
top: 15%;
width: 6px;
height: 70%;
- overflow: hidden;
+ overflow: hidden;
position: absolute;
display: block;
white-space: nowrap;
@@ -174,10 +176,10 @@
.ClientUI_HRFrm {
z-index: 48;
}
-#FrozenBox {
+.ClientUI_FrozenBox{
z-index: 50;
}
-#NormalBox {
+.ClientUI_NormalBox {
z-index: 20;
}
Modified:
trunk/sandbox/scrollable-grid/src/main/templates/org/richfaces/scrollable-grid-header-cell.jspx
===================================================================
---
trunk/sandbox/scrollable-grid/src/main/templates/org/richfaces/scrollable-grid-header-cell.jspx 2007-05-23
17:56:43 UTC (rev 854)
+++
trunk/sandbox/scrollable-grid/src/main/templates/org/richfaces/scrollable-grid-header-cell.jspx 2007-05-23
17:57:35 UTC (rev 855)
@@ -11,7 +11,7 @@
component="javax.faces.component.UIComponent"
- <td class="ClientUI_Grid_HC"
id="#{client_id}:hc_#{cell_index}">
+ <td class="ClientUI_Grid_HC" id="#{client_id}:hc_#{cell_index}"
columnIndex="#{cell_index}">
<span style="width: #{component.attributes['width']}"
id="#{client_id}:hcc_#{cell_index}" class="ClientUI_Grid_HCBody1">
<span id="#{clientId}:hcb_#{cell_index}"
class="ClientUI_Grid_HCBody">
<table width="100%" cellspacing="0" cellpadding="0"
border="0" align="center">
Modified:
trunk/sandbox/scrollable-grid/src/main/templates/org/richfaces/scrollable-grid.jspx
===================================================================
---
trunk/sandbox/scrollable-grid/src/main/templates/org/richfaces/scrollable-grid.jspx 2007-05-23
17:56:43 UTC (rev 854)
+++
trunk/sandbox/scrollable-grid/src/main/templates/org/richfaces/scrollable-grid.jspx 2007-05-23
17:57:35 UTC (rev 855)
@@ -26,12 +26,14 @@
<f:call name="setUpColumnsWidth"/>
- <div id="#{clientId}_GridContainer" style="width:
#{component.attributes['width']};height:
#{component.attributes['height']};" class="ClientUI_Grid">
+
+ <div id="loadLabel" style="display:none; background-color: #A0D1FF;
border: 1px solid #0027C4; width: 200px; height: 50px; text-align: center; vertical-align:
middle;"><font size='4'
color='white'>Loading...</font></div>
+ <div id="#{clientId}_GridContainer" style="width:
#{component.attributes['width']};height:
#{component.attributes['height']};" class="ClientUI_Grid" >
<div id="#{clientId}_GridHeaderTemplate"
class="ClientUI_InlineBox" style="width:
#{component.attributes['width']};">
<div style="display: block; left: 0px; top: 0px; width:
#{sumWidth}px;">
- <span class="ClientUI_TmplBox" id="FrozenBox">
- <table cellpadding="0" cellspacing="0">
+ <span class="ClientUI_TmplBox ClientUI_FrozenBox"
id="#{clientId}:header:FrozenBox">
+ <table cellpadding="0" cellspacing="0"
style="border-collapse:collapse">
<tbody>
<tr class="ClientUI_Grid_HR">
<jsp:scriptlet>
@@ -44,8 +46,8 @@
</table>
</span>
- <span class="ClientUI_TmplBox" id="NormalBox">
- <table cellpadding="0" cellspacing="0">
+ <span class="ClientUI_TmplBox ClientUI_NormalBox"
id="#{clientId}:header:NormalBox">
+ <table cellpadding="0" cellspacing="0"
style="border-collapse:collapse">
<tbody>
<tr class="ClientUI_Grid_HR">
<jsp:scriptlet>
@@ -62,8 +64,8 @@
<div id="#{clientId}_GridBodyTemplate"
class="ClientUI_InlineBox" style="overflow: auto; width:
#{component.attributes['width']}; height:
#{component.attributes['height']};">
<div style="display: block; width: #{sumWidth}px;">
- <span class="ClientUI_TmplBox"
id="#{clientId}:body:FrozenBox">
- <table cellpadding="0" cellspacing="0">
+ <span class="ClientUI_TmplBox ClientUI_FrozenBox"
id="#{clientId}:body:FrozenBox">
+ <table cellpadding="0" cellspacing="0"
style="border-collapse:collapse">
<tbody>
<jsp:scriptlet>
<![CDATA[
@@ -73,8 +75,8 @@
</tbody>
</table>
</span>
- <span class="ClientUI_TmplBox"
id="#{clientId}:body:NormalBox">
- <table cellpadding="0" cellspacing="0">
+ <span class="ClientUI_TmplBox ClientUI_NormalBox"
id="#{clientId}:body:NormalBox">
+ <table cellpadding="0" cellspacing="0"
style="border-collapse:collapse">
<tbody>
<jsp:scriptlet>
<![CDATA[
@@ -89,8 +91,8 @@
<div id="#{clientId}_GridFooterTemplate"
class="ClientUI_InlineBox" style="width:
#{component.attributes['width']};">
<div style="display: block; width: width: #{sumWidth}px;">
- <span class="ClientUI_TmplBox" id="FrozenBox">
- <table cellpadding="0" cellspacing="0">
+ <span class="ClientUI_TmplBox ClientUI_FrozenBox"
id="#{clientId}:footer:FrozenBox">
+ <table cellpadding="0" cellspacing="0"
style="border-collapse:collapse">
<tbody>
<tr class="ClientUI_Grid_FR">
<jsp:scriptlet>
@@ -103,8 +105,8 @@
</table>
</span>
- <span class="ClientUI_TmplBox" id="NormalBox">
- <table cellpadding="0" cellspacing="0">
+ <span class="ClientUI_TmplBox ClientUI_NormalBox"
id="#{clientId}:footer:NormalBox">
+ <table cellpadding="0" cellspacing="0"
style="border-collapse:collapse">
<tbody>
<tr class="ClientUI_Grid_FR">
<jsp:scriptlet>
@@ -120,9 +122,9 @@
</div>
<input type="hidden" name="#{clientId}_state_input"
id="#{clientId}_state_input"/>
+ <input type="hidden" name="#{clientId}_options_input"
id="#{clientId}_options_input"/>
<input type="hidden" name="#{clienId}_rows_input"
id="#{clientId}_rows_input" value="#{rows_count}"/>
<input type="button" name="#{clientId}_submit_input"
id="#{clientId}_submit_input"
onclick="#{this:getRowsAjaxUpdate(context,component)}"
style="display:none"/>
-
</div>
<f:call name="tearDownState"/>
@@ -143,7 +145,9 @@
this.count = rows_count;
this.columns = columns_count;
this.gridId = grid_id;
+ this.curr_options;
},
+
getRow: function(index) {
if(!this.data[index]) {
this.data[index] = [];
@@ -159,18 +163,31 @@
return this.count;
},
getRequestDelay: function() {
- return 50;
+ return 150;
},
+ getCurrentOptions: function() {
+ return this.curr_options;
+ },
+
loadRows: function(options) {
+
var state_options = options;
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;
state_input.value = submit_values;
+// options_input.value = options;
+ this.curr_options = options;
submit_input.click();
+
}
+
});
+
+
+
// ]]>
</script>
@@ -179,6 +196,7 @@
var #{this:getJavaScriptVarName(context, component)} = function() {
+
return {
init : function() {
var currTime = (new Date()).getTime();
@@ -187,6 +205,10 @@
var rows_count = $(clientId + "_rows_input").value;
var columns_count = '#{columns_count}';
+ function onSorted(index, order) {
+ alert("onSorted column: " + index + " by order: " + order);
+ }
+
dataModel = new ClientUI.controls.grid.FakeArrayDataModel(rows_count,
columns_count, clientId);
var templates = [
@@ -205,27 +227,36 @@
indexColumnWidth: 40
}
);
+
+ var progress = new ClientUI.common.box.SplashBox("loadLabel", null, 300,
true);
+ grid.setProgressCtrl(progress);
+ Event.observe(grid.eventOnSort, "on sort", onSorted);
+
// function onColumnResize(column, width) {call to ajax4jsf}
//Event.observe(grid.eventOnResizeColumn, "", onColumnResize);
// ClientUILib.log(ClientUILogger.WARNING, "Grid control created over " +
((new Date()).getTime() - currTime) + " miliseconds.");
- grid.updateLayout();
+ grid.updateLayout();
- setTimeout(function() {
+ setTimeout(
+ function() {
currTime = (new Date()).getTime();
//grid.loadData();
}.bind(this), 100);
-
- // ClientUILib.log(ClientUILogger.WARNING, "Done.");
- }
-
- }
+ // ClientUILib.log(ClientUILogger.WARNING, "Done.");
+ },
+
+ onCompleteGridInvalidation : function(request, event, data){
+ var local = dataModel.getCurrentOptions();
+ dataModel.eventDataReady.fire(local);
+ }
+ }
}();
-
#{this:getScriptContributions(context, component)};
Event.observe(window, 'load', #{this:getJavaScriptVarName(context,
component)}.init);
+
// ]]>
</script>