incubator-xap-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From mtu...@apache.org
Subject svn commit: r530315 - in /incubator/xap/trunk: codebase/css/xapDefault.css codebase/src/xap/bridges/dojo/ColumnBridge.js codebase/src/xap/bridges/dojo/TableBridge.js codebase/src/xap/widgets/dojo/TreeTable.js samples/WebContent/examples/widgets/table.xal
Date Thu, 19 Apr 2007 08:09:18 GMT
Author: mturyn
Date: Thu Apr 19 01:09:16 2007
New Revision: 530315

URL: http://svn.apache.org/viewvc?view=rev&rev=530315
Log:
Changes to implement resizable columns for tables.  Many changes in TreeTable.js:  an instance
of the Dojo SplitContainer is created and superimposed over the table head and body, synched
to
the column widths, which in turn must be synched to it once it's been dragged.

TODO:  Simplify this by making the toplevel container of this widget a SplitContainer or subclass,
with the headers in shortened child-panes at the top of the splitter, but the sizer divs extending
down to the bottom (this differs from the standard SplitContainer, where the child panes occupy
the full height).

TODO:  Small styling tweaks to line up the column headers with the body columns, which ahve
never been exactly right.....

Modified:
    incubator/xap/trunk/codebase/css/xapDefault.css
    incubator/xap/trunk/codebase/src/xap/bridges/dojo/ColumnBridge.js
    incubator/xap/trunk/codebase/src/xap/bridges/dojo/TableBridge.js
    incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js
    incubator/xap/trunk/samples/WebContent/examples/widgets/table.xal

Modified: incubator/xap/trunk/codebase/css/xapDefault.css
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/css/xapDefault.css?view=diff&rev=530315&r1=530314&r2=530315
==============================================================================
--- incubator/xap/trunk/codebase/css/xapDefault.css (original)
+++ incubator/xap/trunk/codebase/css/xapDefault.css Thu Apr 19 01:09:16 2007
@@ -200,6 +200,8 @@
 	background-image: url(./xap_header.gif);
 	background-position: bottom left;
 	background-repeat: repeat-x;
+	border-right:2px solid rgb(222,222,222);
+	margin: 0px
 }
 
 .xapHeaderMouseOver{
@@ -228,6 +230,37 @@
 .xapHeaderWrapper{
 	border-right: 1px solid #999;
 }
+
+.xapHeaderContents{
+	overflow:hidden;	
+}
+/* TABLE COLUMNS SIZERS: */
+
+.xapTableStationarySizers {
+	cursor: move;
+	cursor: w-resize;
+	width: 0px ;
+	background-color:white;
+	border-right:1px ridge rgb(191,191,191);
+	border-left: 1px  ridge rgb(223,223,223);
+	-moz-opacity: 0.4;
+	opacity: 0.4;
+	filter: Alpha(Opacity=40);	
+}
+
+.xapTableMovingSizer {
+	width:0px ;				
+	font-size: 0px;
+	cursor: move;
+	cursor: w-resize;
+	background-color: white ;
+	border-left:1px double white;
+	-moz-opacity: 0.8;
+	opacity: 0.8;
+	filter: Alpha(Opacity=80);
+	margin: 0;	
+}
+
 
 
 /* TABLE */

Modified: incubator/xap/trunk/codebase/src/xap/bridges/dojo/ColumnBridge.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/xap/bridges/dojo/ColumnBridge.js?view=diff&rev=530315&r1=530314&r2=530315
==============================================================================
--- incubator/xap/trunk/codebase/src/xap/bridges/dojo/ColumnBridge.js (original)
+++ incubator/xap/trunk/codebase/src/xap/bridges/dojo/ColumnBridge.js Thu Apr 19 01:09:16
2007
@@ -65,4 +65,16 @@
 	this.getPeer().setHeader(childHandler.getPeer());
 }
 
+/**
+ *	This seems the best place at which to cache the 
+ *  XAL-derived width, if any:
+**/ 
+xap.bridges.dojo.ColumnBridge.prototype.init = function(){
+	xap.bridges.dojo.ColumnBridge.superclass.init.call(this) ;
+	var peer =  this.getPeer() ;
+	if( peer ){
+		peer._explicitColumnWidth = this.getElement().getAttribute("width") ;		
+	}
+}
+
 

Modified: incubator/xap/trunk/codebase/src/xap/bridges/dojo/TableBridge.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/src/xap/bridges/dojo/TableBridge.js?view=diff&rev=530315&r1=530314&r2=530315
==============================================================================
--- incubator/xap/trunk/codebase/src/xap/bridges/dojo/TableBridge.js (original)
+++ incubator/xap/trunk/codebase/src/xap/bridges/dojo/TableBridge.js Thu Apr 19 01:09:16 2007
@@ -121,10 +121,15 @@
 
 xap.bridges.dojo.TableBridge.prototype.setHeightAttribute = function(value){
 	this.getPeer().setHeight (value);
-}	
-
+}
+	
+xap.bridges.dojo.TableBridge.prototype.setWidthAttribute = function(aWidth){
+	this.getPeer().setWidth(aWidth) ;
+}
 
 xap.bridges.dojo.TableBridge.prototype.addChild = function(childHandler, index){
+// TODO: implement "addSelfToTable" methods on child peers
+// so that we can reduce this to four polymorphic lines:
 	var childPeer = childHandler.getPeer();
 	if (childPeer instanceof xap.widgets.dojo.TableColumn){
 		//TODO interpret index correctly
@@ -146,3 +151,4 @@
 		this.getPeer().removeRow(childPeer);
 	}
 }
+

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=530315&r1=530314&r2=530315
==============================================================================
--- incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js (original)
+++ incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js Thu Apr 19 01:09:16 2007
@@ -31,6 +31,9 @@
 Xap.require("dojo.style");
 Xap.require("dojo.event");
 Xap.require("xap.util.ArrayHelper");
+Xap.require("xap.widgets.dojo.DivWrapper");
+
+
 
 //IMPORTANT move this to some shared area
 dojo.widget.manager.registerWidgetPackage("xap.widgets.dojo");
@@ -57,6 +60,9 @@
 	this._tableCellClass = "tableCell";
 	this._headerVisibility = "visible";
 	this._initialResizePending = true;
+	
+	// width of each column sizer, in pixels:
+	this._sizerWidth = 2 ;
 }
 
 dojo.inherits(xap.widgets.dojo.TreeTable,dojo.widget.HtmlWidget);
@@ -65,16 +71,34 @@
 	//TODO calc padding after laying out headers?
 	//this is a bad strategy in general, the problem is we want the inner table
 	//to be sized at 100%
-	templateString: '<div style="padding:0px 0px 0px 0px; overflow:hidden;position:relative;text-align:left">'
+
-		'<div dojoAttachPoint="headerDiv"><table dojoAttachPoint="headerTable" style="position:relative;width:100%;table-layout:fixed;">'
+
-		'<tbody dojoAttachPoint="headerTbody"><tr dojoAttachPoint="headerRow"></tr></tbody></table></div>'+
-		'<div dojoAttachPoint="scrollDiv" style="overflow:auto;width:100%;height:100%;">'
+
-		'<table dojoAttachPoint="table" style="height:100%;"><tbody></tbody></table></div></div>',
+	templateString: 
+'<div style="padding:0px 0px 0px 0px; overflow:hidden;position:relative;text-align:left">'
+	+ '<div dojoAttachPoint="splitterContainer"></div>'
+	+ '<div dojoAttachPoint="headerDiv">'
+		+ '<table dojoAttachPoint="headerTable" border="1" style="position:relative;width:100%;table-layout:fixed;">'
+			+ '<tbody dojoAttachPoint="headerTbody">'
+				+ '<tr dojoAttachPoint="headerRow"></tr>'
+			+ '</tbody>'
+		+ '</table>'
+	+ '</div>'
+	+ '<div dojoAttachPoint="scrollDiv" style="overflow:auto;width:100%;height:100%;">'
+		+ '<table dojoAttachPoint="table" style="height:100%;">'
+			+ '<tbody></tbody>'
+		+ '</table>'
+	+ '</div>'
++ '</div>',
+
+	
 	templateCssPath: null ,
 	widgetType: "TreeTable",
 	isContainer: false,
 	defaultCellInfo: {_text:""},
 	
+	postCreate: function(){
+		xap.widgets.dojo.TreeTable.superclass.postCreate.apply(this,arguments) ;
+		this._created = true ;
+	},
+	
 	/**
 	 * 
 	 * 
@@ -165,18 +189,25 @@
 				columnWidth = this.table.childNodes[i].offsetWidth;
 			}
 			
-			/* if the user explicitly set, we use those */
-			if ( this._columns[i]._headerWidth ) {
-				var val = this._getSizeFromString (this._columns[i]._headerWidth);
-				if ( val ) setWidth = val;
-			}
+			/* if the user explicitly set the column width or
+			   its header's width , we use those (preferring
+			   as usual the last value parsed, that is, 
+			   the header's:
+			*/
+
+			var setWidth = this._columns[i].getBestWidth() ;
 			
-			// we want the greater of explicity set, calculated column or calculated cell; note that
we need to look up
-			// the explicity set ones in case the table is hidden when created
-			var finalWidth = headerWidth>columnWidth ? headerWidth:columnWidth;
-			finalWidth = setWidth>finalWidth?setWidth:finalWidth;			
-			this._columns[i]._calculatedWidth = finalWidth + "px";
-			tableWidth += finalWidth;
+			// 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 ;
+			if( !setWidth ){
+				finalWidth = headerWidth>columnWidth ? headerWidth:columnWidth;	
+			}
+			this._columns[i].setSetWidth(finalWidth) ;
+			tableWidth += parseInt(finalWidth);
 		}
 		
 		//if we don't fix the width here then when we want the table
@@ -185,6 +216,7 @@
 		this.table.style.width = tableWidth + "px";
 		this.headerTable.style.width = tableWidth + "px";
 		
+		
 		this.headerTable.style.tableLayout = "fixed";
 		this.table.style.tableLayout = "fixed";
 
@@ -197,24 +229,35 @@
 	_fixColumnWidths : function(){
 		var firstRow = this._rows.length>0?this._rows[0].domNode:null;
 		for (var i=0; i<this._columns.length;i++){
-			var width = this._columns[i]._calculatedWidth;  // Note: ends with "px"
-			
+			// Note: ends with "px":
+			var width = this._columns[i].getBestWidth();
+			//...so use this:
+			var nWidth = parseInt(width) ;
+	
+			width = (nWidth +this._sizerWidth )+"px" ;
+	
 			if (dojo.render.html.ie){
 				dojo.html.setMarginBox( this.headerRow.childNodes[i],
-					{width: parseInt(width)} ) ;
+					{width: nWidth} ) ;
 						
 				if (firstRow && firstRow.childNodes[i]){
 					dojo.html.setMarginBox( firstRow.childNodes[i],
-						{width: parseInt(width)} ) ;					
+						{width: nWidth} ) ;					
 				}
 			}
 			else{
 				this.headerTable.childNodes[i].style.width = width;
 				this.table.childNodes[i].style.width = width;
 			}
-			if (this.headerRow.childNodes[i].childNodes[0])
+			if (this.headerRow.childNodes[i].childNodes[0]){
 				this.headerRow.childNodes[i].childNodes[0].style.width  = "100%";
+			}
+			if( this.columnsSizer ){
+				this.columnsSizer.children[i].sizeShare	
+					= this.headerRow.childNodes[i].clientWidth ;			
+			}					
 		}
+
 	},
 	
 	/**
@@ -283,25 +326,28 @@
 	
 	/**
 	 * Rebuilds just the head (column headers)
-	 * of the table.
+	 * of the table.  Skip sizers or outer dom node
+	 * if we've just shifted a column sizer:
 	 */
 	_rebuildHead: function(){
 		
 		this._headerVisibility = this.headerDiv.style.visibility;
-		this.domNode.removeChild(this.headerDiv);
 		
-		this.headerDiv = document.createElement("div");
+		this.domNode.removeChild(this.headerDiv);		
+		this.headerDiv = document.createElement("div");		
 		this.domNode.appendChild(this.headerDiv);
-		
+				
 		//this.headerDiv.style.width="1000px";
 		this.headerDiv.style.width="100%";
+
+		
 		this.headerDiv.style.position="relative";
 		this.headerDiv.style.textAlign="left";
 		dojo.html.addClass(this.headerDiv,'xapHeaderBackground');	
 
 		this.headerTable = document.createElement("table");
 		this.headerDiv.appendChild(this.headerTable);
-
+	
 		this.headerTable.cellPadding = "0px";
 		this.headerTable.cellSpacing= "0px";
 		
@@ -309,6 +355,7 @@
 		for (var i = 0; i<this._columns.length; i++){
 			var column = this._columns[i];
 			var headerCol = document.createElement("col");
+//debugging aid:			dojo.html.addClass(headerCol,'col_col');
 			this.headerTable.appendChild(headerCol);
 		}
 		
@@ -320,11 +367,30 @@
 		this.headerBody.appendChild(this.headerRow);
 		for (var i = 0; i<this._columns.length; i++){
 			var cell = document.createElement("td");
+//debugging aid			dojo.html.addClass(cell,'col_cell');
 			dojo.html.addClass(cell,'xapHeaderWrapper');	
-			this.headerRow.appendChild(cell);
+
 			cell.style.whiteSpace = "nowrap";
+			// If overflow isn't hidden, then 
+			// column cannot by shrunk below 
+			// width of the contents:
+			cell.style.overflow="hidden" ;
+			
+			var w = null ;	
+			var hasColumns = this._columns && this._columns[i] ;
+			if(hasColumns){
+				if(w=this._columns[i].getBestWidth()){
+					cell.style.width = w ;
+				} else {
+					cell.style
+				}
+			}			
+			this.headerRow.appendChild(cell);			
+			
 			if (this._columns[i]._header && this._columns[i]._header._rootDomNode){	
-				cell.appendChild(this._columns[i]._header._rootDomNode);
+				var subnode = this._columns[i]._header._rootDomNode ;
+				subnode.style.overflow = "hidden" ;
+				cell.appendChild(subnode);		
 			}
 			cell.style.visibility = this._headerVisibility;
 		}
@@ -334,6 +400,7 @@
 			this.headerDiv.style.visibility='hidden';
 			this.headerDiv.style.display='none';
 		}
+				
 	},
 	
 	/**
@@ -352,11 +419,29 @@
 		
 		this._rebuildHead();
 		this._rebuildBody();
+		
+
 		window.clearTimeout(this._rebuildTableTask);
 		this._rebuildTableTask = null;
 		this._resizeTable();
+
+		if(dojo.render.html.ie){
+			this.pullback() ;
+		}		
+		
+		dojo.lang.setTimeout(this,this._renewColumnSizers,10) ;
 	},
 	
+	pullback:function(){
+		var box = dojo.html.getMarginBox(this.headerTable) ;
+		delete box.height ;
+		// "I hate magic."
+		//		---Merlin.
+		box.width+=2 ;
+		dojo.html.setMarginBox( this.domNode, box ) ;
+	},		
+	
+	
 	_rebuildRow: function( row, depth, alternateRow ){
 		this.tbody.appendChild(row.domNode);
 		row.setDepth(depth);
@@ -378,6 +463,7 @@
 	},
 	
 	
+	
 	_recolorRow: function( row, alternateRow ){
 		if (alternateRow){
 			dojo.html.addClass(row.domNode,this._alternateRowClass);
@@ -403,6 +489,65 @@
 		this.onResized();
 	},
 	
+	setWidth: function(aWidth){
+
+		if( !this.domNode ){
+			return ;
+		}
+		var oWidth = (dojo.html.getMarginBox(this.domNode)).width ;
+		this.domNode.style.width = aWidth ;
+		var fWidth = (dojo.html.getMarginBox(this.domNode)).width ; 
+
+
+		var delta = fWidth - oWidth ;
+
+		if( delta == 0  ){
+			return ;
+		}
+		if( delta <0){
+			// any need to do anything?
+		} else {
+			
+			if( delta > 0 ){
+				//widened:
+				var w = fWidth + "px" ;
+
+				var headerChildren = this.headerRow.childNodes ;
+				var len = headerChildren.length ;				
+				var wLast 
+					= dojo.html.getMarginBox(headerChildren[len-1]).width ;
+				
+				this.table.style.width = w ;
+				this.headerTable.style.width = w ;
+				this.headerRow.style.width = "100%" ;					
+				this.columnsSizer.paneWidth = fWidth ;			
+				this.columnsSizer.domNode.style.width = w ;				
+				this.extendLastColumn(wLast+delta) ;
+			}
+		}
+	},	
+	
+	extendLastColumn: function(newWidth){
+		var headerChildren = this.headerRow.childNodes ;
+		var len = headerChildren.length ;
+		if(len > 0){
+			headerChildren[len-1].style.width = newWidth+"px";				
+			var sizer = this.columnsSizer ;
+			// Put all the extra space in the last column:
+			sizer.children[len-1].sizeShare = newWidth ;
+			sizer.children[len-1].sizeActual = newWidth ;
+			this._columns[len-1]._explicitColumnWidth
+						 = newWidth + "px" ;
+		}
+		// We're now in much the same situation as at a drag end:
+		// we need to resize headers and body cells according to the
+		// new columns:
+		this._endSizing() ;
+		if(dojo.render.html.ie){
+			this.pullback() ;
+		}		
+	},
+	
 	
 	_isResized: function(w, h){
 		// summary
@@ -586,6 +731,7 @@
 	onScrollCallback : function(event){
 		if (this.scrollDiv){
 			this.headerDiv.style.left = -this.scrollDiv.scrollLeft + "px";
+			this.splitterContainer.style.left=this.headerDiv.offsetLeft+"px";
 		}
 	},
 
@@ -668,7 +814,233 @@
 		if (aVal==bVal) return 0;
 		if (aVal<bVal) return -1;
 		return 1;
+	},
+		// Add sizers for the columns that have just been built:
+	// 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(){
+
+		if(!this.headerDiv){
+			return ;
+		}
+	
+		if( this.columnsSizer ){
+			var sizer = this.columnsSizer ;
+			dojo.event.disconnect(	
+								sizer,
+								sizer.endSizing,
+								this,
+								this.onEndSizing
+								) ;
+			dojo.event.disconnect(	
+								sizer,
+								sizer.beginSizing,
+								this,
+								this.onBeginSizing
+								) ;			
+			
+
+			if( this.splitterContainer ){
+				this.splitterContainer.parentNode.removeChild(this.splitterContainer) ;
+			}
+			delete this.columnsSizer ;		
+		}
+	
+		this.splitterContainer 
+			= this.domNode.appendChild(document.createElement("div")) ;
+		this.splitterContainer.style.position = "absolute" ;
+		this.splitterContainer.style.top = "0px" ;		
+		
+		
+		var box = dojo.html.getContentBox(this.headerRow) ;
+		box.height = this.domNode.scrollHeight ;
+		dojo.html.setMarginBox(this.splitterContainer,box) ;
+				
+		this.columnsSizer = 
+			dojo.widget.createWidget(
+										"SplitContainer",
+										{
+											height:box.height,
+											width:box.width,
+											sizerWidth:this._sizerWidth,
+											persist:false,
+											activeSizing:false
+										},
+										this.splitterContainer
+										);
+
+		
+		this.splitterContainer.style.height = "100%" ;
+		this.splitterContainer.style.width = this.headerRow.offsetWidth+"px" ;
+		
+		this.splitterContainer.style.zIndex = 0 ;
+		
+																									
+		for (var ii = 0; ii<this.headerRow.childNodes.length; ++ii){
+			var node = this.headerRow.childNodes[ii] ;
+			var box = dojo.html.getMarginBox(node) ;				
+
+			var widg = dojo.widget.createWidget("DivWrapper",box) ;
+			// This is the proportion of the entire split
+			// pane given over to this panel:
+			widg.sizeShare = box.width ;			
+			this.columnsSizer.addChild( widg ) ;			
+		}		
+									
+		this.columnsSizer.postCreate() ;
+		var sizerDivs = this.columnsSizer.sizers ;
+		var h = this.domNode.offsetHeight ;
+		for( var kk=0; kk < sizerDivs.length ; ++kk ){
+			aSizer = sizerDivs[kk] ;	
+			aSizer.style.height = h ;
+			dojo.html.removeClass(aSizer, "dojoSplitContainerSizerH") ;
+			dojo.html.addClass(aSizer, "xapTableStationarySizers") ;
+			aSizer.style.visibility="visible" ;
+		}		
+		
+		//this.columnsSizer._layoutPanels();
+		this._hideSplitPanelsAndShowSizers(0) ;
+		
+		dojo.event.connect(	
+							this.columnsSizer,
+							this.columnsSizer.endSizing,
+							this,
+							this.onEndSizing
+							) ;
+		dojo.event.connect(	
+							this.columnsSizer,
+							this.columnsSizer.beginSizing,
+							this,
+							this.onBeginSizing
+							) ;
+							
+		this._redoSplitterStyling(0) ;
+	},	
+
+	_redoSplitterStyling: function(delay){
+		if( delay != undefined ){
+			dojo.lang.setTimeout(this,this._redoSplitterStyling,delay) ;
+			return ;
+		}
+		var sizer = this.columnsSizer ;
+		var sizerDomNode = sizer.domNode ;
+		sizerDomNode.style.width = "100%";
+		sizerDomNode.style.height = "100%";		
+		sizer.onResized(null) ;
+		
+		var sizerDivs = sizer.sizers ;
+		
+
+		// We end up with superfluous sizers at the 
+		// end of the list; trim them:
+		// TODO:  Keep them from showing up in the
+		// first place.		
+		var nColumns = this._columns.length ;
+		var nSizers = nColumns - 1 ;
+// Take out for now; hurts Tree instances:		
+//		while( sizerDivs.length>nSizers ){
+//			sizerDomNode.removeChild(sizerDivs[sizerDivs.length - 1]) ;
+//			// go g.c....g.c.?
+//			sizerDivs[sizerDivs.length - 1] = null ;
+//			--sizerDivs.length ;
+//		}
+
+		var h = this.domNode.offsetHeight +"px" ;
+		var aSizer = null ;
+
+		// Now we know the true sizer-width:
+		if( aSizer != null ){
+			var w = (dojo.html.getMarginBox(aSizer)).width ;
+			this._sizerWidth = w ;
+			sizer.sizerWidth = w ;	
+		}
+		
+		// Assign the split panels' "sizeShare", which will be used
+		// to set the relative sizes of the panels.  Here, we'll use
+		// their actual sizes; the widget will sum them and use them
+		// to get the correct proportions and sizes:
+		for(var ii=0; this._columns && ii< this._columns.length; ++ii ){
+			sizer.children.sizeShare = this._columns[ii].clientWidth ;
+		}
+	
+	},
+
+	_hideSplitPanelsAndShowSizers: function(delay){
+		if( delay != undefined ){
+			dojo.lang.setTimeout(this,this._hideSplitPanelsAndShowSizers,delay) ;
+			return ;
+		}
+		var sizer = this.columnsSizer ;
+		var parent = this.columnsSizer.domNode ;
+		var sizerHandles = sizer.sizers ;
+		parent.style.visibility = "hidden" ;
+		for(var ii=0; ii < sizerHandles.length; ++ii){
+			var child = sizerHandles[ii] ;
+			child.style.visibility = "visible" ;
+			child.style.zIndex = 0 ;
+		}	
+		sizer.virtualSizer.style.visibility = "visible" ;	
+	},
+
+	onEndSizing: function(){
+		dojo.lang.setTimeout(this,this._endSizing,10) ;
+	},
+	
+	
+	_endSizing: function(){	
+		dojo.html.removeClass( this.columnsSizer.virtualSizer, "xapTableMovingSizer" ) ;	
+
+		this.columnsSizer._layoutPanels() ;
+	
+		var children = this.columnsSizer.children ;
+	
+		// tell the columns how wide they ought to be:
+		var children = this.columnsSizer.children ;
+	
+		for(var ii=0 ; ii < children.length; ++ii ){
+			var w = children[ii].sizeActual ;
+//			if( ii > 0 ){
+//				w += this._sizerWidth ;
+//			}
+			var wPx = w +"px" ;
+			this._columns[ii].setSetWidth(w) ;
+			this._columns[ii]._explicitColumnWidth = wPx ;			
+			dojo.html.setMarginBox(
+									this._columns[ii].domNode,
+									{width:w}
+									) ;	
+			dojo.html.setMarginBox(
+									this.headerRow.childNodes[ii],
+									{width:w}
+									) ;														
+		}
+
+		this._fixColumnWidths() ;
+		//now repopulate the body rows using the good new columns:
+		for (var i =0; i<this._rows.length; i++){
+			this._rebuildRow(this._rows[i], 0);
+		}
+
+
+		// hide split panels, otherwise they'd
+		// block mouse events to the column headers
+		// they're over:
+		this._hideSplitPanelsAndShowSizers(10) ;	
+
+	},
+	
+	onBeginSizing: function(){
+		var dragger = this.columnsSizer.virtualSizer ;
+		dojo.html.removeClass( dragger, "dojoSplitContainerVirtualSizerH" ) ;
+		dojo.html.addClass( dragger, "xapTableMovingSizer" ) ;
+		// Can't cache: table height might changed
+		dragger.style.height = this.domNode.offsetHeight+"px" ;
+		// Bring splitter container to front so
+		// that we're not getting the column mouseover effects:
+		this.splitterContainer.style.visibility = "visible" ;	
 	}
+	
 }
 );
 
@@ -705,9 +1077,11 @@
 		dojo.html.addClass(xapLabel.getImgHint(),'xapSortNoneImage');
 		dojo.event.connect(xapLabel._rootDomNode, "onclick", this, "onClickCallback");
 		
-		// if there are explicit widths then save those
-		if ( xapLabel._rootDomNode.style.width )
+		// if there's an explicitly-set width in the header
+		// then save it, else stick with any we might have got from XAL:
+		if ( xapLabel._rootDomNode.style.width ){
 			this._headerWidth = xapLabel._rootDomNode.style.width;
+		}
 	},
 	
 	setTable: function(table){
@@ -718,7 +1092,37 @@
 		if (this._table){
 			this._table.sortColumn(this);
 		}
+	},
+	
+	getSetWidth: function(){
+		return this._sSetWidth ;
+	},
+
+	setSetWidth: function(val){
+		var res = val ;
+		// We want a string value that
+		// can be used to directly set
+		// a style object member:
+		if(!isNaN(val)){
+			res += "px" ;
+		}
+		this._sSetWidth = res ;
+	},
+	
+	getBestWidth: function(){
+		var res = this.getSetWidth() ;
+		if( !res ){
+			// Use column width; if not set,
+			// use header width:
+			if( res = this._explicitColumnWidth ){
+			} else if( res = this._headerWidth ){
+			}
+		}
+		return res ;
 	}
+	
+	
+	
 });
 		
 
@@ -771,7 +1175,8 @@
 		this._cellInfo.push(cellInfo);
 		var td = document.createElement("td");
 		this.domNode.appendChild(td);
-		td.style.whiteSpace = "nowrap";
+		//td.style.whiteSpace = "nowrap";
+		td.style.overflow = "hidden";		
 		td.align="left";
 		td.valign = "top";
 		
@@ -791,6 +1196,7 @@
 		//everywhere???
 		if (!this._indentSpan){
 			this._indentSpan = document.createElement("span");
+			this._indentSpan.style.overflow= "hidden" ;
 			td.appendChild(this._indentSpan);
 			this._indentSpan.innerHTML = "&nbsp;";
 			dojo.event.connect(this._indentSpan, "onclick", this, "onExpandCallback");
@@ -913,4 +1319,4 @@
 		}
 	}	
 	
-});
\ No newline at end of file
+});

Modified: incubator/xap/trunk/samples/WebContent/examples/widgets/table.xal
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/samples/WebContent/examples/widgets/table.xal?view=diff&rev=530315&r1=530314&r2=530315
==============================================================================
--- incubator/xap/trunk/samples/WebContent/examples/widgets/table.xal (original)
+++ incubator/xap/trunk/samples/WebContent/examples/widgets/table.xal Thu Apr 19 01:09:16
2007
@@ -209,19 +209,26 @@
 				<freePane width="500px" height="300px" backgroundColor="#EEEEFF"
 					id="testComponentFreePane">
 					<table id="testComponent">
-						<column id="column1" onCreate="mco:attributeSetter.registerElement(this)">
-							<header text="Column 1"/>
+						<column id="column1" width="160px" onCreate="mco:attributeSetter.registerElement(this)">
+							<header text="Column 1" />
 						</column>
-						<column>
-							<header text="Column 2"/>
-						</column>
-						<column id="column3" onCreate="mco:attributeSetter.registerElement(this)">
-							<header text="Column 3"/>
+						<column width="80px">
+							<header text="Column 2" />
 						</column>
+						<column id="column3" 
+							width="40px"
+							onCreate="mco:attributeSetter.registerElement(this)"
+						>
+							<header text="Column 3"/>
+						</column>
+						<column width="20px" id="columnA" onCreate="mco:attributeSetter.registerElement(this)">
+							<header text="Column A"/>
+						</column>						
 						<row id="row1" onCreate="mco:attributeSetter.registerElement(this)">
 							<cell text="a"/>
 							<cell text="b"/>
-							<cell text="c"/>
+							<cell text="c"/>
+							<cell text="d"/>							
 							<row id="myBranch" onCreate="mco:attributeSetter.registerElement(this)">
 								<cell text="depth 2 a"/>
 								<cell text="depth 2 b"/>



Mime
View raw message