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/15 16:49:33 UTC

svn commit: r538251 - /incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js

Author: mturyn
Date: Tue May 15 09:49:32 2007
New Revision: 538251

URL: http://svn.apache.org/viewvc?view=rev&rev=538251
Log:
Cleaned up debugging, slightly altered onResized() to accurately reflect scrollDiv (was using its clientWidth when I wanted its offsetWidth).

Known bugs:
      1.) Under IE, will get both horizontal and vertical scrollbars even if there's explicit
           clipping only in one direction---for example, if you create a table that's shorter
           than the sums of the specified widths of its columns, you will get both the requisite
           horizontal scroll bar and also a vertical one (probably because the reduced vertical
           space due the needed scrollbar).
      2.) Under Firefox, dynamically shortening a table below its natural width (after load), 
           under Firefox, is missing the vertical scrollbar this should produce.  Earlier work 
           suggests that in this case the scroll div is being clipped by the dom node---it's too
           wide, and so the bar is outside the region displayed.
                

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=538251&r1=538250&r2=538251
==============================================================================
--- incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js (original)
+++ incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js Tue May 15 09:49:32 2007
@@ -101,21 +101,21 @@
 	_tableLayoutModel: {},
 	
 // Debugging	
-	_ctr:-1 ,
-	loggit: function(aString){
-		Xap.logString+="^"+(++this._ctr)
-						+"\t"+aString+"\t";
-		if(this.table){
-			Xap.logString
-				+=this.table.clientWidth +"\t"+this.domNode.clientWidth ;
-		}
-	},
+//	_ctr:-1 ,
+//	loggit: function(aString){
+//		Xap.logString+="^"+(++this._ctr)
+//						+"\t"+aString+"\t";
+//		if(this.table){
+//			Xap.logString
+//				+=this.table.clientWidth +"\t"+this.domNode.clientWidth ;
+//		}
+//	},
 	
-	postCreate: function(){   this.loggit('postCreate') ;
+	postCreate: function(){   //debug::this.loggit('postCreate') ;
 		xap.widgets.dojo.TreeTable.superclass.postCreate.apply(this,arguments) ;
 		this._created = true ;	
 // debugging
-		window.foo = this ;
+//		window.foo = this ;
 
 //if(location.href.indexOf("nested")>-1 ){
 //Xap.logString=""+location.href.split("/").pop()+":^"
@@ -137,7 +137,7 @@
 	/**
 	 * Rebuild just the rows of the table, typically called after sorting.
 	 */
-	_rebuildRowsLater : function(delay){   this.loggit('_rebuildRowsLater ') ;
+	_rebuildRowsLater : function(delay){   //debug::this.loggit('_rebuildRowsLater ') ;
 		
 		//if a full rebuild is pending don't bother
 		if (!this._rebuildTableTask && !this._rebuildRowsTask){
@@ -149,7 +149,7 @@
 	/**
 	 * Rebuilds the entire table from scratch, should be a very rare occurence.
 	 */
-	_rebuildTableLater: function(delay){   this.loggit('_rebuildTableLater') ;
+	_rebuildTableLater: function(delay){   //debug::this.loggit('_rebuildTableLater') ;
 		
 		//cancel any partial rebuild tasks
 		if (this._rebuildRowsTask){
@@ -172,13 +172,13 @@
 	 * Once the table is built/sized run through 
 	 * and make sure headers and column widths agree
 	 */
-	_resizeTableLater: function(){   this.loggit('_resizeTableLater') ;
+	_resizeTableLater: function(){   //debug::this.loggit('_resizeTableLater') ;
 		if (!this._resizeTableTask){
 			this._resizeTableTask = dojo.lang.setTimeout(this, this._resizeTable, 0);
 		}
 	},
 	
-	_getSizeFromString: function(val){   this.loggit('_getSizeFromString') ;
+	_getSizeFromString: function(val){   //debug::this.loggit('_getSizeFromString') ;
 		var s = new String(val);
 		var i = s.search ("px");
 		if ( i > 0 ) return Number(s.substr(0,i));
@@ -190,7 +190,7 @@
 	 * After a table has been built to the screen go through and make sure
 	 * the widths of columns and headers match up.
 	 */
-	_resizeTable: function(){	   this.loggit('_resizeTable') ;
+	_resizeTable: function(){	   //debug::this.loggit('_resizeTable') ;
 		var tableWidth = 0;
 
 		//don't user tbody.childNodes[0] here because in the case
@@ -309,7 +309,6 @@
 					// ...whereas _we_ set this, and know
 					// it to be a number giving the width
 					// in pixels:
-					alert("r: "+ this._resetWidthPx) ;
 					this.domNode.style.width = this._tableLayoutModel.resedWidthPx+"px";
 				}
 			}
@@ -331,7 +330,7 @@
 
 	},
 	
-	_fixColumnWidths : function(){   this.loggit('_fixColumnWidths ') ;
+	_fixColumnWidths : function(){   //debug::this.loggit('_fixColumnWidths ') ;
 		if( this._columns.length==0){
 			this.table.style.width="100%" ;
 			return ;
@@ -393,7 +392,7 @@
 	 * Rebuilds just the real table part of table, not
 	 * the headers.
 	 */
-	_rebuildBody: function(){   this.loggit('_rebuildBody') ;
+	_rebuildBody: function(){   //debug::this.loggit('_rebuildBody') ;
 
 		this.domNode.removeChild(this.scrollDiv);
 		this.scrollDiv = document.createElement("div");
@@ -441,7 +440,7 @@
 	 * Rebuilds only the rows in the table, leaving the columns in place
 	 * with the same sizes. Useful for sorting.
 	 */
-	_rebuildRows: function(){   this.loggit('_rebuildRows') ;
+	_rebuildRows: function(){   //debug::this.loggit('_rebuildRows') ;
 		if (this.tbody){
 			this.table.removeChild(this.tbody);
 		}
@@ -470,11 +469,11 @@
 		this._redoSplitterStyling(1000) ;		
 	},
 	
-	getVerticalScrollbarWidthPx: function(){   this.loggit('getVerticalScrollbarWidthPx') ;
+	getVerticalScrollbarWidthPx: function(){   //debug::this.loggit('getVerticalScrollbarWidthPx') ;
 		return this.scrollDiv.offsetWidth - this.scrollDiv.clientWidth ;
 	},
 	
-	getHorizontalScrollbarHeightPx: function(){   this.loggit('getHorizontalScrollbarHeightPx') ;
+	getHorizontalScrollbarHeightPx: function(){   //debug::this.loggit('getHorizontalScrollbarHeightPx') ;
 		return this.scrollDiv.offsetHeight - this.scrollDiv.clientHeight ;
 	},	
 	
@@ -483,7 +482,7 @@
 	 * of the table.  Skip sizers or outer dom node
 	 * if we've just shifted a column sizer:
 	 */
-	_rebuildHead: function(){   this.loggit('_rebuildHead') ;
+	_rebuildHead: function(){   //debug::this.loggit('_rebuildHead') ;
 		
 		this._headerVisibility = this.headerDiv.style.visibility;
 		
@@ -580,7 +579,7 @@
 	/**
 	 * Rebuilds the entire table from scratch
 	 */
-	_rebuildTable: function(){		   this.loggit('_rebuildTable') ;
+	_rebuildTable: function(){		   //debug::this.loggit('_rebuildTable') ;
 		var wh = dojo.html.getMarginBox(this.domNode);
 		
 		//if we have no width wait for onResized()
@@ -606,7 +605,7 @@
 	},
 	
 
-	_rebuildRow: function( row, depth, alternateRow ){   this.loggit('_rebuildRow') ;
+	_rebuildRow: function( row, depth, alternateRow ){   //debug::this.loggit('_rebuildRow') ;
 		this.tbody.appendChild(row.domNode);
 		row.setDepth(depth);
 		for (var i = 0; i<row._rows.length; i++){
@@ -618,7 +617,7 @@
 	//even if we expanded only the very last row. If we add/remove/expand/contract
 	//a row we only really need to start recoloring at that node
 	//TODO efficiency
-	_recolorAlternateRows: function(){   this.loggit('_recolorAlternateRows') ;
+	_recolorAlternateRows: function(){   //debug::this.loggit('_recolorAlternateRows') ;
 		if (!this._alternateRowClass) return;
 		var alternateRow = false;
 		for (var i =0; i<this._rows.length; i++){
@@ -628,7 +627,7 @@
 	
 	
 	
-	_recolorRow: function( row, alternateRow ){   this.loggit('_recolorRow') ;
+	_recolorRow: function( row, alternateRow ){   //debug::this.loggit('_recolorRow') ;
 		if (alternateRow){
 			dojo.html.addClass(row.domNode,this._alternateRowClass);
 		}
@@ -649,14 +648,14 @@
 	/*
 	* Support for dynamic sizing 
 	*/	
-	setHeight:function(value){   this.loggit('setHeight') ;
+	setHeight:function(value){   //debug::this.loggit('setHeight') ;
 		if (this.domNode){
 			this.domNode.style.height = value ;
 		}
 		this.onResized();
 	},
 	
-	setWidth: function(aWidth){   this.loggit('setWidth') ;
+	setWidth: function(aWidth){   //debug::this.loggit('setWidth') ;
 
 		if( !this.domNode ){
 			return ;
@@ -731,7 +730,7 @@
 		}
 	},	
 	
-	extendLastColumn: function(newWidth){   this.loggit('extendLastColumn') ;
+	extendLastColumn: function(newWidth){   //debug::this.loggit('extendLastColumn') ;
 		var headerChildren = this.headerRow.childNodes ;
 		var len = headerChildren.length ;
 		if(len > 0){
@@ -750,7 +749,7 @@
 	},
 
 	
-	_isResized: function(w, h){   this.loggit('_isResized') ;
+	_isResized: function(w, h){   //debug::this.loggit('_isResized') ;
 		// summary
 		//	Test if my size has changed.
 		//	If width & height are specified then that's my new size; otherwise,
@@ -772,7 +771,7 @@
 		return true;
 	},
 	
-	onResized:function(){   this.loggit('onResized') ;
+	onResized:function(){   //debug::this.loggit('onResized') ;
 		if ( this.scrollDiv && this.headerDiv){
 			if (this._initialResizePending && this.width) {
 				this._rebuildTableLater();
@@ -794,7 +793,6 @@
 			}
 			
 			var scrollDivClientWidth = this.scrollDiv.clientWidth ;
-			//alert(0);
 			this.scrollDiv.style.height = contentHt;
 			
 			
@@ -803,11 +801,10 @@
 			// horizontal scrollbar:
 			if( scrollDivClientWidth > this.scrollDiv.clientWidth){
 				var contentWd = "100%";
-				var wd = this.scrollDiv.clientWidth;			
+				var wd = this.scrollDiv.offsetWidth;		
 				if ( wd > 0 ){
 					contentWd = wd + "px";
 				}
-				alert(1) ;
 				this.scrollDiv.style.width = contentWd ;											
 			}
 			
@@ -824,7 +821,7 @@
 	 * 
 	 */
 	 
-	insertColumn: function(column, index){   this.loggit('insertColumn') ;
+	insertColumn: function(column, index){   //debug::this.loggit('insertColumn') ;
 		column.setTable(this);
 		
 		if (index && index>=0){
@@ -837,14 +834,14 @@
 		//more efficient by inserting the column in place
 	},
 	
-	removeColumn: function(column){   this.loggit('removeColumn') ;
+	removeColumn: function(column){   //debug::this.loggit('removeColumn') ;
 		xap.util.ArrayHelper.removeElement (this._columns,column);
 		//TODO efficiency
 		this._rebuildTableLater();
 	},
 	
 	//index here is relative to parent row?
-	insertRow: function(row, index){   this.loggit('insertRow') ;
+	insertRow: function(row, index){   //debug::this.loggit('insertRow') ;
 		if (index && index>=0){
 			xap.util.ArrayHelper.insertElementAt(this._rows,row,index);		
 		}
@@ -855,12 +852,12 @@
 		this._rowAdded(row);
 	},
 	
-	removeRow: function( row ){   this.loggit('removeRow') ;
+	removeRow: function( row ){   //debug::this.loggit('removeRow') ;
 		xap.util.ArrayHelper.removeElement (this._rows,row);
 		this._rowRemoved(row);
 	},
 	
-	_rowAdded: function(row){   this.loggit('_rowAdded') ;
+	_rowAdded: function(row){   //debug::this.loggit('_rowAdded') ;
 		row.setTable(this);
 		
 		//if the row starts as selected when it is added,
@@ -892,7 +889,7 @@
 		}
 	},
 	
-	_rowRemoved: function(row){   this.loggit('_rowRemoved') ;
+	_rowRemoved: function(row){   //debug::this.loggit('_rowRemoved') ;
 
 		if (this.isSelected(row)){
 			xap.util.ArrayHelper.removeElement(this._selectedItems, row);
@@ -913,7 +910,7 @@
 	 * Row selection stuff
 	 */
 	 
-	 selectRow: function(row){   this.loggit(' selectRow') ;
+	 selectRow: function(row){   //debug::this.loggit(' selectRow') ;
 	 	if (this.isSelected(row)){
 	 		return false;
 	 	}
@@ -925,17 +922,17 @@
 	 	return true;
 	 },
 	 
-	 selectRowByUser: function(row){   this.loggit(' selectRowByUser') ;
+	 selectRowByUser: function(row){   //debug::this.loggit(' selectRowByUser') ;
 	 	if (this.selectRow(row)){
 	 		this.onSelectRow(row);
 	 	}
 	 },
 	 
-	 onSelectRow : function(row){   this.loggit(' onSelectRow ') ;
+	 onSelectRow : function(row){   //debug::this.loggit(' onSelectRow ') ;
 	 	//event hook
 	 },
 	 
-	 clearSelection : function(){   this.loggit(' clearSelection ') ;
+	 clearSelection : function(){   //debug::this.loggit(' clearSelection ') ;
 	 	for (var i =0; i<this._selectedItems.length; i++){
 	 		dojo.html.removeClass(this._selectedItems[i].domNode,this._selectedRowClass);
 	 		this.onDeselectRow(this._selectedItems[i]);
@@ -943,19 +940,19 @@
 	 	this._selectedItems = [];
 	 },
 	 
-	 activateRow: function(row){   this.loggit(' activateRow') ;
+	 activateRow: function(row){   //debug::this.loggit(' activateRow') ;
 	 	this.onActivateRow(row);
 	 },
 	 
-	 onDeselectRow : function(row){   this.loggit(' onDeselectRow ') ;
+	 onDeselectRow : function(row){   //debug::this.loggit(' onDeselectRow ') ;
 	 	//event hook
 	 },
 	 
-	 onActivateRow : function(row){   this.loggit(' onActivateRow ') ;
+	 onActivateRow : function(row){   //debug::this.loggit(' onActivateRow ') ;
 	 	//event hook
 	 },
 	 
-	 isSelected: function(row){   this.loggit(' isSelected') ;
+	 isSelected: function(row){   //debug::this.loggit(' isSelected') ;
 	 	return (xap.util.ArrayHelper.indexOf(this._selectedItems,row)>=0);
 	 },
 	 
@@ -967,14 +964,14 @@
 	 * 
 	 */	
 	 
-	onExpandRow : function(row, expanded){   this.loggit('onExpandRow ') ;
+	onExpandRow : function(row, expanded){   //debug::this.loggit('onExpandRow ') ;
 		this._recolorAlternateRows();
 		this._redoSplitterStyling(1000) ;
 		//event hook
 	},
 	 
 	 
-	onScrollCallback : function(event){   this.loggit('onScrollCallback ') ;
+	onScrollCallback : function(event){   //debug::this.loggit('onScrollCallback ') ;
 
 		if (this.scrollDiv){
 			// We have a vertical scrollbar, adjust header to
@@ -989,7 +986,7 @@
 	},
 
 
-	sortColumn: function( column ){   this.loggit('sortColumn') ;
+	sortColumn: function( column ){   //debug::this.loggit('sortColumn') ;
 		
 		//blank out the sort icon on the column we previously sorted
 		if (this._lastSortedColumn && (this._lastSortedColumn != column)){
@@ -1061,7 +1058,7 @@
 		this._rebuildRowsLater();
 	},
 	
-	_sortStringsFunction: function(a, b){   this.loggit('_sortStringsFunction') ;
+	_sortStringsFunction: function(a, b){   //debug::this.loggit('_sortStringsFunction') ;
 		var aVal = a._sortValue.toLowerCase();
 		var bVal = b._sortValue.toLowerCase();
 		if (aVal==bVal) return 0;
@@ -1069,7 +1066,7 @@
 		return 1;
 	},
 	
-	_sortNumbersFunction: function(a, b){   this.loggit('_sortNumbersFunction') ;
+	_sortNumbersFunction: function(a, b){   //debug::this.loggit('_sortNumbersFunction') ;
 		var aVal = a._sortValue;
 		var bVal = b._sortValue;
 		if (aVal==bVal) return 0;
@@ -1077,7 +1074,7 @@
 		return 1;
 	},
 	
-	_sizeSplitterContainer: function(){   this.loggit('_sizeSplitterContainer') ;
+	_sizeSplitterContainer: function(){   //debug::this.loggit('_sizeSplitterContainer') ;
 		var box = {} ;
 
 		box.width = this.headerTable.clientWidth
@@ -1091,7 +1088,7 @@
 	// TODO:  Re-write table so that the header is already
 	// a split container instead of a table row---should make
 	// things much simpler here:
-	_renewColumnSizers: function(){   this.loggit('_renewColumnSizers') ;
+	_renewColumnSizers: function(){   //debug::this.loggit('_renewColumnSizers') ;
 
 		if( !this.headerDiv || !this._columns|| this._columns.length==0 ){
 			return ;
@@ -1234,7 +1231,7 @@
 		this.onEndSizing() ;
 	},	
 
-	_redoSplitterStyling: function(delay){   this.loggit('_redoSplitterStyling') ;
+	_redoSplitterStyling: function(delay){   //debug::this.loggit('_redoSplitterStyling') ;
 		if( delay != undefined ){
 			this._redoSplitterStylingTask
 				= dojo.lang.setTimeout(this,this._redoSplitterStyling,delay) ;
@@ -1299,7 +1296,7 @@
 		sizer._layoutPanels() ;
 	},
 
-	_hideSplitterPanelsAndShowSizers: function(delay){   this.loggit('_hideSplitterPanelsAndShowSizers') ;
+	_hideSplitterPanelsAndShowSizers: function(delay){   //debug::this.loggit('_hideSplitterPanelsAndShowSizers') ;
 		if( delay != undefined ){
 			this._hideSplitterPanelsAndShowSizersTask
 				= dojo.lang.setTimeout(this,this._hideSplitterPanelsAndShowSizers,delay) ;
@@ -1360,13 +1357,13 @@
 				   {0 opacity} xor {alpha-filter stuff} works fine in Fire-
 				   fox, IE7, and IE6/Win2K.
 				*/
-//debug				//childStyle.backgroundColor="transparent" ;			
+				childStyle.backgroundColor="transparent" ;			
 			}			
 		}	
 		for(var kk=nSizers; kk < sizerHandles.length ; ++kk){
 			var child = sizerHandles[kk] ;
-//debug			child.style.visibility = "hidden" ;
-			child.style.backgroundColor="violet";
+			child.style.visibility = "hidden" ;
+//debug			child.style.backgroundColor="violet";
 			child.style.zIndex = 500 ;
 		}	
 		var headers = this.headerRow.childNodes ;		
@@ -1399,13 +1396,13 @@
 		sizer.virtualSizer.style.visibility = "visible" ;	
 	},
 
-	onEndSizing: function(){   this.loggit('onEndSizing') ;
+	onEndSizing: function(){   //debug::this.loggit('onEndSizing') ;
 		dojo.html.removeClass( this.columnsSizer.virtualSizer, "xapTableMovingSizer" ) ;	
 		dojo.lang.setTimeout(this,this._reconcileHeaderAndBodyColumns,10) ;
 	},
 	
 	
-	_reconcileHeaderAndBodyColumns: function(){	   this.loggit('_reconcileHeaderAndBodyColumns') ;
+	_reconcileHeaderAndBodyColumns: function(){	   //debug::this.loggit('_reconcileHeaderAndBodyColumns') ;
 	
 		if(!this.columnsSizer){
 			this._fixColumnWidths();
@@ -1455,7 +1452,7 @@
 
 	},
 	
-	onBeginSizing: function(){   this.loggit('onBeginSizing') ;
+	onBeginSizing: function(){   //debug::this.loggit('onBeginSizing') ;
 		var dragger = this.columnsSizer.virtualSizer ;
 		dojo.html.removeClass( dragger, "dojoSplitContainerVirtualSizerH" ) ;
 		dojo.html.addClass( dragger, "xapTableMovingSizer" ) ;