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/11 22:10:22 UTC
svn commit: r537301 -
/incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js
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);
+
+}