You are viewing a plain text version of this content. The canonical link for it is here.
Posted to xap-commits@incubator.apache.org by mt...@apache.org on 2007/05/24 07:30:26 UTC
svn commit: r541211 -
/incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js
Author: mturyn
Date: Thu May 24 00:30:23 2007
New Revision: 541211
URL: http://svn.apache.org/viewvc?view=rev&rev=541211
Log:
Scrollbars seem better; wrote a _resetScrollDiv (that should probably become onResized())
that compare the state of the widget's scrollDiv box with the scrollDiv overflow set to
"hidden" with what happens after it's been set to "auto".
Known defect: square in upper right above a vertical scrollbar isn't handled correctly
under IE : it's filled with the header. Under Firefox the header div is clipped properly.
Modified:
incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js
Modified: incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js?view=diff&rev=541211&r1=541210&r2=541211
==============================================================================
--- incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js (original)
+++ incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js Thu May 24 00:30:23 2007
@@ -17,7 +17,7 @@
*
*/
-
+// Mark!
Xap.provide("xap.widgets.dojo.TreeTable");
Xap.provide("xap.widgets.dojo.TableColumn");
@@ -302,7 +302,7 @@
){
this.domNode.style.width = tableWidth +"px" ;
} else {
- if( this._initialWidth ){
+ if( this._tableLayoutModel.initialWidth ){
// We get this one directly from the XAL
// element, so it could easily be a percentage
// or in a non-pixel unit:
@@ -557,7 +557,7 @@
var header = null ;
if (header = this._columns[i]._header){
-
+ this._lastHeaderAdded = header ;
var hAlign = this._columns[i]._horizontalAlignment ;
if( !hAlign ){
// Default alignment:
@@ -682,12 +682,12 @@
// they've arrived.
// TODO: Handle case where user _wants_
// a zero-height or -width table:
- if ( dojo.render.html.moz && this._isNotRoughedIn() ){
+ if ( this._isNotRoughedIn() ){
// Don't reschedule another one if
// one's there already:
if( !this._setHeightTask ){
this._setHeightTask
- = dojo.lang.setTimeout(this,this.setHeight,0,aHeight) ;
+ = dojo.lang.setTimeout(this,this.setHeight,100,aHeight) ;
}
return ;
}
@@ -699,7 +699,7 @@
this.scrollDiv.style.height="100%" ;
this.scrollDiv.style.width="100%" ;
- this.scrollDiv.style.overflow="scroll" ;
+ this.scrollDiv.style.overflow="hidden" ;
this.domNode.style.height = aHeight ;
// Table style might have been at "100%" in width or height;
@@ -713,14 +713,79 @@
= (this.domNode.offsetHeight
- this.headerDiv.offsetHeight) +"px" ;
- dojo.lang.setTimeout(this,this._setScrollDivOverflowStyle,500,"auto");
-
+ this._resetScrollDivLater(500) ;
},
- _setScrollDivOverflowStyle: function(value){
- this.scrollDiv.style.overflow=value ;
- },
+ _resetScrollDivLater: function(delay){ //debug::this.loggit('_rebuildTableLater') ;
+
+ //cancel any partial rebuild tasks
+ if (this._resetScrollDivTask){
+ window.clearTimeout(this._resetScrollDivTask);
+ this._resetScrollDivTask = null;
+ }
+
+ //if not already scheduled then schedule it
+ var theDelay = delay || 0 ;
+ if (!this._resetScrollDivTask){
+ this._resetScrollDivTask
+ = dojo.lang.setTimeout(this, this._resetScrollDiv, theDelay);
+ }
+ },
+
+
+ _resetScrollDiv: function(){
+ // Should probably be able to avoit this,
+ // but this is doing it directly....
+ var oBox = {} ;
+ oBox.width = this.scrollDiv.clientWidth ;
+ oBox.height = this.scrollDiv.clientHeight ;
+
+ this.scrollDiv.style.overflow="auto" ;
+ dojo.lang.setTimeout(this,this._finishScrollDiv,200,oBox) ;
+ },
+
+ _finishScrollDiv: function(originalScrollClientBox){
+ var fBox = {} ;
+ fBox.width = this.scrollDiv.clientWidth ;
+ fBox.height = this.scrollDiv.clientHeight ;
+
+ var deltaH = originalScrollClientBox.height - fBox.height ;
+ var deltaW = originalScrollClientBox.width - fBox.width ;
+
+ // If there's no set width,
+ // make room for the scrollbar
+ if( deltaW ){
+ if(!this._tableLayoutModel.initialWidth
+ && !this._tableLayoutModel.resetWidthPx
+ ){
+ var newWidthPx = this.domNode.scrollWidth ;
+ if(dojo.render.html.moz){
+ newWidthPx += deltaW ;
+ }
+ this.domNode.style.width = newWidthPx + "px" ;
+ // Redisplays headerDiv appropriately---fills in
+ // square above right vertical scrollbar:
+ this.onScrollCallback() ;
+ // TODO: IMPORTANT: find a way to bring the
+ // get the upper right to look decent under IE6/7.
+ }
+ }
+ //debugger;
+ if( deltaH ){
+ // If there's no set height,
+ // make room for the scrollbar
+ if( !this._tableLayoutModel.initialHeight
+ && !this._tableLayoutModel.resetHeightPx
+ ){
+ var newHeightPx = this.domNode.scrollHeight ;
+ if(dojo.render.html.moz){
+ newHeightPx += deltaH ;
+ }
+ this.scrollDiv.style.height = newHeightPx +"px" ;
+ }
+ }
+ },
setWidth: function(aWidth){ //debug::this.loggit('setWidth') ;
// If we don't have real (non-{zero-extent})
@@ -737,16 +802,19 @@
// TODO: find out why height and width behave differently
// TODO: reactivate this gate if needed, fix the screw-up
// described above.
-// if ( dojo.render.html.moz && this._isNotRoughedIn() ){
-// // Don't reschedule another one if
-// // one's there already:
-// if( !this._setWidthTask ){
-// this._setWidthTask
-// = dojo.lang.setTimeout(this,this.setWidth,0,aWidth) ;
-// }
-// return ;
-// }
+ if (this._isNotRoughedIn() ){
+ // Don't reschedule another one if
+ // one's there already:
+ if( !this._setWidthTask ){
+ this._setWidthTask
+ = dojo.lang.setTimeout(this,this.setWidth,100,aWidth) ;
+ }
+ return ;
+ }
+ this.scrollDiv.style.overflow="hidden" ;
+ //(Change back later.)
+
// Table style might have been at "100%" in width or height;
// if that were so then when the scroll div were resized
// the table would too, and so not overflow:
@@ -756,6 +824,7 @@
}
var oWidth = (dojo.html.getContentBox(this.domNode)).width ;
+ this.scrollDiv.style.width = "100%" ;
this.domNode.style.width = aWidth ;
var fWidth = (dojo.html.getContentBox(this.domNode)).width ;
@@ -782,44 +851,49 @@
var deltaPx = fWidth - oWidth ;
if( deltaPx == 0 ){
+ this._resetScrollDivLater(500) ;
return ;
}
if( deltaPx <0){
- // any need to do anything?
-
- } else {
-
- if( !this.headerRow
- || !this.headerRow.childNodes
- || this.headerRow.childNodes.length == 0
- ){
- return ;
- }
-
-
+ // any need to do anything else?
+ this._resetScrollDivLater(500) ;
+ return ;
- if( deltaPx > 0 ){
- //widened:
- var w = fWidth + "px" ;
-
-
- this.table.style.width = "100%" ;
- var tableWidth = this.table.clientWidth +"px" ;
- this.table.style.width = tableWidth ;
-
- this.headerDiv.style.width = "100%" ;
- this.headerDiv.style.width = this.headerDiv.clientWidth +"px";
- this.headerTable.style.width = tableWidth ;
-// this.headerRow.style.width
-// = (this.getVerticalScrollbarWidthPx()+this.scrollDiv.scrollWidth) +"px" ;
+ }
+
+ // widened dom node:
+ if( !this.headerRow
+ || !this.headerRow.childNodes
+ || this.headerRow.childNodes.length == 0
+ ){
+ return ;
+ }
+
- this.columnsSizer.paneWidth = fWidth ;
- this.columnsSizer.domNode.style.width = w ;
- this.extendLastColumn(deltaPx) ;
- }
- }
- this.onResizedLater(100) ;
+ if( deltaPx > 0 ){
+ //widened:
+ var w = fWidth + "px" ;
+
+// TODO: remove all the bits now made redundant by
+// _resetScrollDiv
+
+ this.table.style.width = "100%" ;
+ var tableWidth = this.table.clientWidth +"px" ;
+ this.table.style.width = tableWidth ;
+
+ this.headerDiv.style.width = "100%" ;
+ this.headerDiv.style.width = this.headerDiv.clientWidth +"px";
+ this.headerTable.style.width = tableWidth ;
+// this.headerRow.style.width
+// = (this.getVerticalScrollbarWidthPx()+this.scrollDiv.scrollWidth) +"px" ;
+
+ this.columnsSizer.paneWidth = fWidth ;
+ this.columnsSizer.domNode.style.width = w ;
+ this.extendLastColumn(deltaPx) ;
+ }
+
+ this._resetScrollDivLater(500) ;
},
extendLastColumn: function(changeInPixels){ //debug::this.loggit('extendLastColumn') ;
@@ -896,76 +970,72 @@
},
onResized:function(){ //debug::this.loggit('onResized') ;
- return ;
- if ( !this.scrollDiv || !this.headerDiv){
- return ;
- }
-
- if( !this.domNode || !this.domNode.clientWidth
- ||!this.domNode.clientHeight
- ){
- return ;
- }
-
- //cancel any partial rebuild tasks
- if (this._onResizedTask){
- window.clearTimeout(this._onResizedTask);
- this._onResizedTask = null;
- }
-
-
- if (this._initialResizePending && this.width) {
- this._rebuildTableLater();
- }
-
- // Table style might have been at "100%" in width or height;
- // if that were so then when the scroll div were resized
- // the table would too, and so not overflow:
- if( this.table ){
- var tableBox = dojo.html.getMarginBox(this.table) ;
- dojo.html.setMarginBox(this.table,tableBox) ;
- }
-
- /* recalculate the content scrollDiv */
- var contentHt = "100%";
- var ht = this.domNode.clientHeight - this.headerDiv.clientHeight;
- if ( ht > 0 ){
- contentHt = ht + "px";
- }
-
- var scrollDivClientWidth = this.scrollDiv.clientWidth ;
- this.scrollDiv.style.height = contentHt;
-
-
- // We might've just clipped ~20px from the right
- // of the table; in that case we might need an
- // horizontal scrollbar:
- if( scrollDivClientWidth > this.scrollDiv.clientWidth){
- var contentWd = "100%";
- var wd = this.scrollDiv.offsetWidth;
- if ( wd > 0 ){
- contentWd = wd + "px";
- }
- this.scrollDiv.style.width = contentWd ;
- this.scrollDiv.style.height =
- (this.scrollDiv.scrollHeight
- - 20)+"px" ;
- }
- if( this.columnsSizer ){
- this._renewColumnSizers() ;
- }
-
- dojo.lang.setTimeout(this,this._resetScrollDivBox,0) ;
+ return ;
+// I think this has mostly been made redundant by code
+// in _resetScrollDiv
+// if ( !this.scrollDiv || !this.headerDiv){
+// return ;
+// }
+//
+// if( !this.domNode || !this.domNode.clientWidth
+// ||!this.domNode.clientHeight
+// ){
+// return ;
+// }
+//
+// //cancel any partial rebuild tasks
+// if (this._onResizedTask){
+// window.clearTimeout(this._onResizedTask);
+// this._onResizedTask = null;
+// }
+//
+//
+// if (this._initialResizePending && this.width) {
+// this._rebuildTableLater();
+// }
+//
+// // Table style might have been at "100%" in width or height;
+// // if that were so then when the scroll div were resized
+// // the table would too, and so not overflow:
+// if( this.table ){
+// var tableBox = dojo.html.getMarginBox(this.table) ;
+// dojo.html.setMarginBox(this.table,tableBox) ;
+// }
+//
+// /* recalculate the content scrollDiv */
+// var contentHt = "100%";
+// var ht = this.domNode.clientHeight - this.headerDiv.clientHeight;
+// if ( ht > 0 ){
+// contentHt = ht + "px";
+// }
+//
+// var scrollDivClientWidth = this.scrollDiv.clientWidth ;
+// this.scrollDiv.style.height = contentHt;
+//
+//
+// // We might've just clipped ~20px from the right
+// // of the table; in that case we might need an
+// // horizontal scrollbar:
+// if( scrollDivClientWidth > this.scrollDiv.clientWidth){
+// var contentWd = "100%";
+// var wd = this.scrollDiv.offsetWidth;
+// if ( wd > 0 ){
+// contentWd = wd + "px";
+// }
+// this.scrollDiv.style.width = contentWd ;
+// this.scrollDiv.style.height =
+// (this.scrollDiv.scrollHeight
+// - 20)+"px" ;
+// }
+// if( this.columnsSizer ){
+// this._renewColumnSizers() ;
+// }
+//
+// dojo.lang.setTimeout(this,this._resetScrollDiv,0) ;
},
- _resetScrollDivBox: function(){
- // this seems to be needed to get ab initio widths and
- // heights right:
- this.scrollDiv.style.width="100%" ;
- this.scrollDiv.style.height="100%" ;
- },
/**
*
*
@@ -1125,14 +1195,13 @@
onScrollCallback : function(event){ //debug::this.loggit('onScrollCallback ') ;
-
if (this.scrollDiv){
// We have a vertical scrollbar, adjust header to
// look like it's to the left of it:
this.headerDiv.style.width
=(this.getVerticalScrollbarWidthPx()
+ this.scrollDiv.scrollWidth
- )+"px" ;
+ )+"px" ;
this.headerDiv.style.left = -this.scrollDiv.scrollLeft + "px";
this.splitterContainer.style.left =this.headerDiv.offsetLeft+"px";
}
@@ -1236,7 +1305,7 @@
dojo.html.setMarginBox(this.splitterContainer,box) ;
},
- _addSplitPane: function(aBox, lastPaneP){
+ _addSplitterPane: function(aBox, lastPaneP){
var widg = dojo.widget.createWidget("DivWrapper",aBox) ;
// This is the proportion of the entire split
// pane given over to this panel:
@@ -1246,6 +1315,7 @@
this.columnsSizer.addChild( widg ) ;
if( lastPaneP ){
widg.sizeMin = 0 ;
+ this._lastSplitterPane = widg.domNode ;
}
},
@@ -1321,7 +1391,7 @@
for (var ii = 0; ii<this.headerRow.childNodes.length; ++ii){
var node = this.headerRow.childNodes[ii] ;
var box = dojo.html.getMarginBox(node) ;
- this._addSplitPane(box) ;
+ this._addSplitterPane(box) ;
}
// Add an additional panel for any space that might
@@ -1330,7 +1400,7 @@
var box = {height: this.headerDiv.clientHeight,
width: this.domNode.scrollWidth - this.headerTable.scrollWidth
}
- this._addSplitPane(box,true) ;
+ this._addSplitterPane(box,true) ;
this._lastSizer
= this.columnsSizer.sizers[this.columnsSizer.sizers.length - 1] ;
@@ -1406,11 +1476,13 @@
aSizer._xapReformatted = true ;
}
- if( dojo.render.html.ie ){
- // splitters don't refresh properly on their
- // once they're moved, under IE6/7:
- this.onScrollCallback() ;
- }
+
+ // splitters don't refresh properly on their
+ // own once they're moved, under IE6/7:
+ // (Later:) see similar problem under Firefox,
+ // maybe this help there:
+ this.onScrollCallback() ;
+
},
_fixSizerWidthAndPosition: function(index){