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 jm...@apache.org on 2007/08/10 20:03:19 UTC
svn commit: r564737 - in /incubator/xap/trunk/codebase: css/xapDefault.css
src/xap/bridges/dojo/ColumnBridge.js src/xap/widgets/dojo/TreeTable.js
Author: jmargaris
Date: Fri Aug 10 13:03:18 2007
New Revision: 564737
URL: http://svn.apache.org/viewvc?view=rev&rev=564737
Log:
setting column widths should now work visible should
work on both rows and columns
Modified:
incubator/xap/trunk/codebase/css/xapDefault.css
incubator/xap/trunk/codebase/src/xap/bridges/dojo/ColumnBridge.js
incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js
Modified: incubator/xap/trunk/codebase/css/xapDefault.css
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/codebase/css/xapDefault.css?view=diff&rev=564737&r1=564736&r2=564737
==============================================================================
--- incubator/xap/trunk/codebase/css/xapDefault.css (original)
+++ incubator/xap/trunk/codebase/css/xapDefault.css Fri Aug 10 13:03:18 2007
@@ -219,6 +219,7 @@
background-image: url(./xap_header.gif);
background-position: bottom left;
background-repeat: repeat-x;
+ border-left: 1px solid #999;
}
.xapHeaderContents{
@@ -249,7 +250,7 @@
}
.xapHeaderWrapper{
- border-right: 1px solid #999;
+ /* border-right: 1px solid #999; */
}
/* TABLE */
@@ -332,7 +333,7 @@
font-size: 8pt;
padding-top: 3px;
padding-bottom: 3px;
- border-right: 1px solid white;
+ border-left: 1px solid white;
border-bottom-width: 1px;
border-bottom-style: solid;
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=564737&r1=564736&r2=564737
==============================================================================
--- incubator/xap/trunk/codebase/src/xap/bridges/dojo/ColumnBridge.js (original)
+++ incubator/xap/trunk/codebase/src/xap/bridges/dojo/ColumnBridge.js Fri Aug 10 13:03:18 2007
@@ -49,7 +49,7 @@
// define xap (non-CSS) attributes
xap.bridges.dojo.ColumnBridge.prototype._xapAttributes = [
- 'dataType', 'horizontalAlignment', 'backgroundImage'
+ 'dataType', 'horizontalAlignment', 'backgroundImage', 'visible'
];
@@ -154,7 +154,7 @@
}
}
-// remove _horizontalAlignment
+// remove _backgroundImage
xap.bridges.dojo.ColumnBridge.prototype.attributeRemovers.backgroundImage = function() {
delete this._backgroundImage;
if(this._localRule !== undefined) {
@@ -163,6 +163,26 @@
}
+// set _visible
+xap.bridges.dojo.ColumnBridge.prototype.setVisibleAttribute = function( value ) {
+ this._visible = (value == 'true' || value == 1);
+ if(this._localRule !== undefined) {
+ this._localRule.style.visibility = (this._visible) ? 'visible' : 'collapse';
+ this._localRule.style.display = (this._visible) ? '' : 'none';
+ }
+ this.getPeer().setVisible(this._visible);
+}
+
+// remove _visible
+xap.bridges.dojo.ColumnBridge.prototype.attributeRemovers.visible = function() {
+ delete this._visible;
+ if(this._localRule !== undefined) {
+ this._localRule.style.visibility = 'visible';
+ this._localRule.style.display = '';
+ }
+ this.getPeer().setVisible(true);
+}
+
/**
* Add child
*/
@@ -211,10 +231,16 @@
}
}
- // backgroundImage too because it uses url()
+ // backgroundImage
if(this._backgroundImage !== undefined) {
- this._localRule.style.backgroundImage = 'url(' + this._backgroundImage + ')';
+ this.setBackgroundImageAttribute(this._backgroundImage);
}
+
+ // visible
+ if(this._visible !== undefined) {
+ this.setVisibleAttribute(this._visible);
+ }
+
};
@@ -236,5 +262,17 @@
xap.bridges.dojo.ColumnBridge.superclass.unload.call(this) ;
};
+
+//****************************************************************//
+// resizing
+/**
+ * Set explicit column width and resize a table
+ */
+xap.bridges.dojo.ColumnBridge.prototype.setWidthAttribute = function( value ){
+ var peer = this.getPeer();
+ if(peer) {
+ peer.setStatedWidth(value);
+ }
+}
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=564737&r1=564736&r2=564737
==============================================================================
--- incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js (original)
+++ incubator/xap/trunk/codebase/src/xap/widgets/dojo/TreeTable.js Fri Aug 10 13:03:18 2007
@@ -132,6 +132,14 @@
return val;
},
+ // resets scroll changes
+ _resetScrollPosition: function() {
+ // reset header table offset
+ this.headerDiv.style.left = "0px";
+ // resets horizontal scroller
+ this.scrollDiv.scrollLeft = 0;
+ },
+
/**
* After a table has been built to the screen go through and make sure
* the widths of columns and headers match up.
@@ -148,40 +156,55 @@
//don't user tbody.childNodes[0] here because in the case
//where we need to fix up IE we want to fixup and THEN remove
//and re-add rows in the new order.
- var firstRow = this._rows.length>0?this._rows[0].domNode:null;
+ var firstRow = null;
+ for(var n = 0; n < this._rows.length; n++) {
+ if(this._rows[n].domNode.style.visibility != 'hidden') {
+ firstRow = this._rows[n].domNode;
+ break;
+ }
+ }
var tableWidth = 0;
for (var i=0; i<this._columns.length;i++){
-
- var headerWidth = 0;
- var columnWidth = 0;
- var setWidth = 0;
+
+ var finalWidth = 0;
- //In IE get/set of column width dynamically doesn't seem to work
- //too well so use first row instead
- if (dojo.render.html.ie){
- var headerWidth = this.headerRow.childNodes[i].offsetWidth;
- if (firstRow && firstRow.childNodes[i]){
- columnWidth = firstRow.childNodes[i].offsetWidth;
- }
- }
- else{
- headerWidth = this.headerTable.childNodes[i].offsetWidth;
- columnWidth = this.table.childNodes[i].offsetWidth;
+ if(this._columns[i]._visible === false) { continue; }
+
+ /* if the user explicitly set column width, we use that */
+ if(this._columns[i].getStatedWidth()) {
+ finalWidth = this._getSizeFromString (this._columns[i].getStatedWidth());
+ }
+ /* otherwise we use header width */
+ else if ( this._columns[i]._headerWidth ) {
+ finalWidth = this._getSizeFromString (this._columns[i]._headerWidth);
}
-
- /* 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;
+ /* otherwise use the "natural" width which is
+ the largest of content or header width */
+ else {
+ var headerWidth = 0;
+ var contentWidth = 0;
+
+ //In IE get/set of column width dynamically doesn't seem to work
+ //too well so use first row instead
+ if (dojo.render.html.ie){
+ headerWidth = this.headerRow.childNodes[i].offsetWidth;
+ if (firstRow && firstRow.childNodes[i]) {
+ contentWidth = firstRow.childNodes[i].offsetWidth;
+ }
+ }
+ else {
+ headerWidth = this.headerTable.childNodes[i].offsetWidth;
+ contentWidth = this.table.childNodes[i].offsetWidth;
+ }
+
+ finalWidth = Math.max(headerWidth, contentWidth);
}
-
- // 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;
+
+ // save calculated width
this._columns[i]._calculatedWidth = finalWidth + "px";
+ // update table total
tableWidth += finalWidth;
}
@@ -206,32 +229,44 @@
this.headerTable.style.tableLayout = "fixed";
this.table.style.tableLayout = "fixed";
+ // explicitly set all column widths
this._fixColumnWidths();
+ // clear all pending tasks
window.clearTimeout(this._resizeTableTask);
this._resizeTableTask = null;
+
+ // reset scroll
+ this._resetScrollPosition();
+
},
+ // whatever width we have calculated and saved, we set that explicitly
_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"
-
- if (dojo.render.html.ie){
- dojo.html.setMarginBox( this.headerRow.childNodes[i],
- {width: parseInt(width)} ) ;
-
- if (firstRow && firstRow.childNodes[i]){
- dojo.html.setMarginBox( firstRow.childNodes[i],
- {width: parseInt(width)} ) ;
- }
+
+ var firstRow = null;
+ for(var n = 0; n < this._rows.length; n++) {
+ if(this._rows[n].domNode.style.visibility != 'hidden') {
+ firstRow = this._rows[n].domNode;
+ break;
}
- else{
- this.headerTable.childNodes[i].style.width = width;
- this.table.childNodes[i].style.width = width;
+ }
+
+ // sets column width to "width" (note: ends with "px")
+ for (var i=0; i<this._columns.length;i++) {
+ //this._fixColumnWidth(this._columns[i], i, firstRow);
+ // get new width
+ var width = this._columns[i]._calculatedWidth;
+ var boxObject = {width: parseInt(width)};
+ // set new width
+ dojo.html.setMarginBox( this.headerRow.childNodes[i], boxObject) ;
+ if (firstRow && firstRow.childNodes[i]){
+ dojo.html.setMarginBox( firstRow.childNodes[i], boxObject ) ;
+ }
+ // update header width to fill all available space
+ if (this.headerRow.childNodes[i].childNodes[0]) {
+ this.headerRow.childNodes[i].childNodes[0].style.width = "100%";
}
- if (this.headerRow.childNodes[i].childNodes[0])
- this.headerRow.childNodes[i].childNodes[0].style.width = "100%";
}
},
@@ -451,6 +486,9 @@
var ht = this.domNode.clientHeight - this.headerDiv.clientHeight;
if ( ht > 0 ) contentHt = ht + "px";
this.scrollDiv.style.height = contentHt;
+
+ // reset scroll position
+ dojo.lang.setTimeout(this, this._resetScrollPosition, 0);
}
},
/**
@@ -464,7 +502,7 @@
insertColumn: function(column, index){
column.setTable(this);
- if (index && index>=0){
+ if (index !== undefined && index >= 0){
xap.util.ArrayHelper.insertElementAt(this._columns,column,index);
}
else{
@@ -482,8 +520,9 @@
//index here is relative to parent row?
insertRow: function(row, index){
- if (index && index>=0){
- xap.util.ArrayHelper.insertElementAt(this._rows,row,index);
+
+ if (index !== undefined && index >= 0){
+ xap.util.ArrayHelper.insertElementAt(this._rows,row,index);
}
else{
this._rows.push(row);
@@ -683,6 +722,16 @@
if (aVal==bVal) return 0;
if (aVal<bVal) return -1;
return 1;
+ },
+
+ _fixNewStatedColumnWidth: function(column) {
+ var firstRow = (this._rows.length > 0) ? this._rows[0].domNode : null;
+
+ // sets column width to "width" (note: ends with "px")
+ for (var i=0; i<this._columns.length;i++) {
+ if (this._columns[i] == column)
+ _fixColumnWidth(column, i, firstRow);
+ }
}
}
);
@@ -741,6 +790,48 @@
if (this._table){
this._table.sortColumn(this);
}
+ },
+
+ // returns previously calculated or preset width
+ getStatedWidth: function(){
+ return this._sStatedWidth ;
+ },
+
+ // saves previously calculated or preset width
+ // initiates table resize
+ setStatedWidth: function(val){
+ this._sStatedWidth = val ;
+ if(this._table) {
+ this._table._resizeTableLater();
+ }
+ },
+
+ // turns visibility on and off
+ setVisible: function (visible){
+
+ this._visible = visible;
+
+ var visibility = (visible === true) ? "visible" : "hidden";
+ var display = (visible === true) ? "" : "none";
+
+ this.domNode.style.visibility = visibility;
+ this.domNode.style.display = display;
+
+
+ if(this._table) {
+ // show/hide header
+ var element = this._table.headerRow.childNodes[0];
+ for (var i = 0; i < this._table._columns.length; i++){
+ if(this._table._columns[i] == this) {
+ element.style.visibility = visibility;
+ element.style.display = display;
+ break;
+ }
+ element = element.nextSibling;
+ }
+ // resize table
+ this._table._resizeTableLater();
+ }
}
});
@@ -815,7 +906,7 @@
// Add column CSS class
// Use tdCount variable to locate column
- if (this._table && this._table._columns) {
+ if (this._table && this._table._columns && this._table._columns.length > 0 ) {
dojo.html.addClass(td, this._table._columns[tdCount]._localCSSClassName);
}
@@ -919,6 +1010,7 @@
}
if(this._table) {
this._table._recolorAlternateRows();
+ this._table._resizeTableLater();
}
},
@@ -930,7 +1022,7 @@
// Don't show the kid if we are not expanded!
row.setVisible(this._expanded);
- if (index && index>=0){
+ if ((index !== undefined) && (index >= 0)){
xap.util.ArrayHelper.insertElementAt(this._rows,row,index);
}
else{