incubator-xap-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From mtu...@apache.org
Subject svn commit: r537301 - /incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js
Date Fri, 11 May 2007 22:10:22 GMT
Author: mturyn
Date: Fri May 11 15:10:20 2007
New Revision: 537301

URL: http://svn.apache.org/viewvc?view=rev&rev=537301
Log:
Much better; extant issues:
        Text wrapping under IE
        Vertical scrollbars vanishing under Firefox.

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=537301&r1=537300&r2=537301
==============================================================================
--- incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js (original)
+++ incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js Fri May 11 15:10:20 2007
@@ -65,7 +65,8 @@
 	this._initialResizePending = true;
 	
 	// width of each column sizer, in pixels:
-	this._sizerWidth = 7 ;
+	this._sizerWidth = 6 ;
+
 };
 
 dojo.inherits(xap.widgets.dojo.TreeTable,dojo.widget.HtmlWidget);
@@ -97,10 +98,20 @@
 	widgetType: "TreeTable",
 	isContainer: false,
 	defaultCellInfo: {_text:""},
+
+	_ctr:-1 ,
+	loggit: function(aString){
+		Xap.logString+="^"+(++this._ctr)
+						+"\t"+aString+"\t";
+		if(this.table){
+			Xap.logString+=this.table.clientWidth ;
+		}
+	},
 	
 	postCreate: function(){
 		xap.widgets.dojo.TreeTable.superclass.postCreate.apply(this,arguments) ;
 		this._created = true ;	
+		window.foo = this ;
 	},		
 	
 	
@@ -196,6 +207,7 @@
 		var hasHeaderTable = this.headerTable && this.headerTable.childNodes ;
 		var hasBodyTable = this.table && this.table.childNodes ;
 		
+		
 		for (var i=0; i<this._columns.length;i++){
 					
 			var headerWidth = 0;
@@ -210,12 +222,12 @@
 				if( hasHeaders && (node = this.headerRow.childNodes[i])){
 					headerWidth 
 						// = node.offsetWidth;
-						= dojo.html.getContentBox(node).width;						
+						= node.clientWidth;						
 				}
 				node = null ;
 				if ( hasFirstRow && (node = firstRow.childNodes[i]) ){
 					columnWidth 
-						= dojo.html.getContentBox(node).width ;
+						= node.clientWidth ;
 				}
 			}
 			else{
@@ -223,13 +235,13 @@
 						&& (node = this.headerTable.childNodes[i])
 						){			
 					headerWidth 
-						= dojo.html.getContentBox(node).width ;
+						= node.clientWidth ;
 				}
 				node=null;
 				if( hasBodyTable
 					&& (node = this.table.childNodes[i])){
 					columnWidth 
-						= dojo.html.getContentBox(node).width ;				
+						= node.clientWidth ;				
 				}
 			}
 			
@@ -240,47 +252,61 @@
 			*/
 
 			var setWidth = this._columns[i].getBestWidth() ;
-			
+		
 			// We want to set the column width to the explicitly-given value
 			// if it should be available from the column or its header); if
 			// a value is not available so, we'll use the greater of the 
 			// extant cell or column widths.  Note that we need to look
 			// up the explicitly-set ones in case the table is hidden when created
-			var finalWidth = setWidth ;
+			var preferredColumnWidth = setWidth ;
 			if( !setWidth ){
-				finalWidth = headerWidth>columnWidth ? headerWidth:columnWidth;	
-				finalWidth += "px" ;
+				preferredColumnWidth = headerWidth>columnWidth ? headerWidth:columnWidth;	
+				preferredColumnWidth += "px" ;
 			}
-			this._columns[i].setStatedWidth(finalWidth) ;
-			tableWidth += parseInt(finalWidth);
+			var preferredColumnWidthPx = parseInt(preferredColumnWidth) ;
+			this._columns[i].setStatedWidth(preferredColumnWidth) ;
+			if(this.columnsSizer 
+				&& this.columnsSizer.children
+					&& this.columnsSizer.children[i]
+				){
+				this.columnsSizer.children[i].sizeShare = preferredColumnWidthPx ;
+			}	
+			tableWidth += preferredColumnWidthPx ;
 		}
-	
+
 		//if we don't fix the width here then when we want the table
 		//to scroll horizontally it doesn't work very well, sizes
 		//too small
 		if( tableWidth != 0 ){
 			this.table.style.width = (tableWidth) + "px";
+			
 			this.headerTable.style.width 
 				= (tableWidth) + "px";
 
 			this.headerTable.style.tableLayout = "fixed";
+			
 			this.table.style.tableLayout = "fixed";
+			
 			this._fixColumnWidths();
+			
 			this.headerDiv.style.width  
 				= (this.getVerticalScrollbarWidthPx()+tableWidth)+"px" ;
-			//this.domNode.style.width = tableWidth+"px" ;						
+			
+			this.domNode.style.width = tableWidth+"px" ;						
 		} else {
 			// Best for Tree
 			// TODO: break out {column/header}less behavious 
 			// into a separate class?		
 			this.table.style.width=this.domNode.clientWidth+"px" ;
 		}
+		
+		dojo.lang.setTimeout(this,this._reconcileHeaderAndBodyColumns,0);
+		
 		if( this._resizeTableTask ){
 			window.clearTimeout(this._resizeTableTask);
 			this._resizeTableTask = null;
-		}
-		
-		dojo.lang.setTimeout(this,this._reconcileHeaderAndBodyColumns,0);
+		}		
+
 	},
 	
 	_fixColumnWidths : function(){
@@ -350,9 +376,16 @@
 		this.scrollDiv = document.createElement("div");
 		this.domNode.appendChild(this.scrollDiv);
 		
-		/* calculate the scroll pane as the body less the height of the header */
+		/* 
+			calculate the scroll pane height as 
+			the body height less the heights of
+			the header and a possible horizontal
+			scrollbar:
+		*/
 		var contentHt = "100%";
-		var ht = this.domNode.clientHeight - this.headerDiv.clientHeight;
+		var ht = this.domNode.clientHeight 
+					- this.headerDiv.clientHeight
+						-this.getHorizontalScrollbarHeightPx() ;
 			
 		//in IE the calculated height can be negative because
 		//clientHeight can be zero
@@ -418,6 +451,10 @@
 		return this.scrollDiv.offsetWidth - this.scrollDiv.clientWidth ;
 	},
 	
+	getHorizontalScrollbarHeightPx: function(){
+		return this.scrollDiv.offsetHeight - this.scrollDiv.clientHeight ;
+	},	
+	
 	/**
 	 * Rebuilds just the head (column headers)
 	 * of the table.  Skip sizers or outer dom node
@@ -587,8 +624,21 @@
 	* Support for dynamic sizing 
 	*/	
 	setHeight:function(value){
-		if (this.domNode) this.domNode.style.height = value;
-		this.onResized();
+
+		if (this.domNode){
+
+			var preChangeScrollbarWidth 
+				= this.getVerticalScrollbarWidthPx() ;
+
+			this.domNode.style.height = value;
+			
+			var postChangeScrollbarWidth 
+				= this.getVerticalScrollbarWidthPx() ;			
+
+			this._setHeight = this.domNode.clientHeight ;
+	
+			this.onResized() ;
+		}
 	},
 	
 	setWidth: function(aWidth){
@@ -600,6 +650,7 @@
 		this.domNode.style.width = aWidth ;
 		var fWidth = (dojo.html.getContentBox(this.domNode)).width ; 
 
+		this._setWidth = fWidth ;
 
 		var delta = fWidth - oWidth ;
 
@@ -631,9 +682,14 @@
 					= dojo.html.getMarginBox(headerChildren[len-1]).width ;
 				
 				this.table.style.width = "100%" ;
-				this.headerTable.style.width = "100%" ;
-				this.headerRow.style.width = "100%" ;
-				this.headerDiv.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 ;				
@@ -689,12 +745,35 @@
 				this._rebuildTableLater();
 			}
 
-			/* recalculate the content scrollDiv */
+			/* Recalculate the content scrollDiv:
+				calculate the scroll pane height as 
+				the body height less the heights of
+				the header:
+			*/
 			var contentHt = "100%";
-			var ht = this.domNode.clientHeight - this.headerDiv.clientHeight;			
-
+			var ht = this.domNode.clientHeight 
+						- this.headerDiv.clientHeight
+						;
+				
+			//in IE the calculated height can be negative because
+			//clientHeight can be zero
 			if ( ht > 0 ) contentHt = ht + "px";
+			
+			var contentWd= "100%";
+			// Note: it's very important that we use getMarginBox()
+			// here instead of <code>this.domNode.clientWidth ;</code>;
+			// under IE that produces a scrollDiv 2px shorter (in this case)
+			// that in turn produces a horizontal scrollbar
+			// (which produces a vertical scrollbar).  "For the want
+			// of a nail...."
+			var wd = dojo.html.getMarginBox(this.domNode).width ;
+			//in IE the calculated height can be negative because
+			//clientHeight can be zero
+			if ( wd > 0 ) contentWd = wd + "px";			
 			this.scrollDiv.style.height = contentHt;
+			
+			this.scrollDiv.style.width = contentWd;			
+		
 			if( this.columnsSizer ){
 				this._renewColumnSizers() ;			
 			}
@@ -861,6 +940,12 @@
 	onScrollCallback : function(event){
 
 		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" ;		
 			this.headerDiv.style.left = -this.scrollDiv.scrollLeft + "px";
 			this.splitterContainer.style.left=this.headerDiv.offsetLeft+"px";	
 		}
@@ -1010,8 +1095,6 @@
 		this._sizeSplitterContainer() ;
 		
 	
-window.foo = this ;
-
 				
 		this.columnsSizer = 
 			dojo.widget.createWidget(
@@ -1291,7 +1374,7 @@
 		var children = this.columnsSizer.children ;
 
 		for(var ii=0 ; ii < children.length; ++ii ){
-			var w = children[ii].sizeActual ;
+			var w = children[ii].sizeShare ;
 
 			var wPx = w +"px" ;
 			this._columns[ii].setStatedWidth(w) ;
@@ -1671,6 +1754,77 @@
 	}	
 	
 });
+
+
+
+
+
+
+window.getWidths = function(foo){
+
+    var s = "\tdom\tscroll\ttable\ttbody\theaderDiv\t\theaderTable" ;
+
+    s += "^client" ;
+    s+= "\t"+foo.domNode.clientWidth;
+    s+= "\t"+foo.scrollDiv.clientWidth;
+    s+= "\t"+foo.table.clientWidth;
+    s+= "\t"+foo.tbody.clientWidth;
+    s+= "\t"+foo.headerDiv.clientWidth;
+    s+= "\t\t"+foo.headerTable.clientWidth;
+
+    s += "^offset" ;
+    s+= "\t"+foo.domNode.offsetWidth;
+    s+= "\t"+foo.scrollDiv.offsetWidth;
+    s+= "\t"+foo.table.offsetWidth;
+    s+= "\t"+foo.tbody.offsetWidth;
+    s+= "\t"+foo.headerDiv.offsetWidth;
+    s+= "\t\t"+foo.headerTable.offsetWidth;
+
+    s += "^scroll" ;
+    s+= "\t"+foo.domNode.scrollWidth;
+    s+= "\t"+foo.scrollDiv.scrollWidth;
+    s+= "\t"+foo.table.scrollWidth;
+    s+= "\t"+foo.tbody.scrollWidth;
+    s+= "\t"+foo.headerDiv.scrollWidth;
+    s+= "\t\t"+foo.headerTable.scrollWidth;
+
+
+    prompt("",s);
+
+}
+
+window.getHeights = function(foo){
+
+    var s = "\t dom\tscroll\ttable\ttbody\theaderDiv\theaderTable" ;
+
+    s += "^client" ;
+    s+= "\t"+foo.domNode.clientHeight;
+    s+= "\t"+foo.scrollDiv.clientHeight;
+    s+= "\t"+foo.table.clientHeight;
+    s+= "\t"+foo.tbody.clientHeight;
+    s+= "\t"+foo.headerDiv.clientHeight;
+    s+= "\t\t"+foo.headerTable.clientHeight;
+
+    s += "^offset" ;
+    s+= "\t"+foo.domNode.offsetHeight;
+    s+= "\t"+foo.scrollDiv.offsetHeight;
+    s+= "\t"+foo.table.offsetHeight;
+    s+= "\t"+foo.tbody.offsetHeight;
+    s+= "\t"+foo.headerDiv.offsetHeight;
+    s+= "\t\t"+foo.headerTable.offsetHeight;
+
+    s += "^scroll" ;
+    s+= "\t"+foo.domNode.scrollHeight;
+    s+= "\t"+foo.scrollDiv.scrollHeight;
+    s+= "\t"+foo.table.scrollHeight;
+    s+= "\t"+foo.tbody.scrollHeight;
+    s+= "\t"+foo.headerDiv.scrollHeight;
+    s+= "\t\t"+foo.headerTable.scrollHeight;
+
+
+    prompt("",s);
+
+}
 
 
 



Mime
View raw message