Author: piotr.buda Date: 2008-11-04 04:00:35 -0500 (Tue, 04 Nov 2008) New Revision: 11006 Modified: trunk/ui/extendedDataTable/src/main/javascript/ClientUI/controls/datatable/ExtendedDataTable.js Log: Fixed resizing of columns when browser window is resized. Modified: trunk/ui/extendedDataTable/src/main/javascript/ClientUI/controls/datatable/ExtendedDataTable.js =================================================================== --- trunk/ui/extendedDataTable/src/main/javascript/ClientUI/controls/datatable/ExtendedDataTable.js 2008-11-03 18:28:41 UTC (rev 11005) +++ trunk/ui/extendedDataTable/src/main/javascript/ClientUI/controls/datatable/ExtendedDataTable.js 2008-11-04 09:00:35 UTC (rev 11006) @@ -6,6 +6,7 @@ $(this.id).component = this; this["rich:destructor"] = "destroy"; this.groups = []; + this.ratios = []; // register event handlers this.options = options; @@ -19,7 +20,7 @@ if (this.options.onColumnResize != null){ this.onColumnResize = this.options.onColumnResize; this.columnWidths = ""; - } + } this.eventContainerResize = this.OnWindowResize.bindAsEventListener(this); this.eventGroupRowClicked = this.OnGroupRowMouseClicked.bindAsEventListener(this); Event.observe(window, "resize", this.eventContainerResize); @@ -96,13 +97,14 @@ if (dS > 0) { this.scrollingDiv.getElement().scrollTop = scrollTop + dS; } - } + } }, setColumnWidth: function(columnIndex, newWidth) { if (columnIndex >= this.getColumnsNumber) { return false; }else{ + //TODO IE fails here, need to find a workaround this.getColumns()[columnIndex].width = newWidth; } }, @@ -176,7 +178,9 @@ OnWindowResize: function(event) { if (this.table) { + this.calculateWidthsFromRatios(); this.updateLayout(); + //this.correctColumns(); } }, getColumnsNumber: function() { @@ -264,7 +268,7 @@ this.splashScreen = $(this.id+":splashscreen"); this.mainDiv = new ClientUI.common.box.Box(this.id,null,true); this.outerDiv = new ClientUI.common.box.Box(this.id +":od",null,true); - this.tableB = $(this.id +":n") + this.tableB = $(this.id +":n"); this.fakeIeRow = $(this.id +":fakeIeRow"); this.fakeIeBodyRow = $(this.id +":body:fakeIeRow"); this.header = new ExtendedDataTable.DataTable.header(this.id +":header",this); @@ -293,12 +297,15 @@ i++; groupRow = $(id+':group-row:'+i); } + this.saveRatios(); }, + getScrollbarWidth: function() { var sd = this.scrollingDiv.getElement(); return sd.offsetWidth - sd.clientWidth; }, validateColumnsWidth: function(columns,excessWidth) { + LOG.debug('firing validateColumnsWidth'); var i=0; var endIndex = columns.length-1; while ((i < endIndex) && (excessWidth > 0)) { @@ -358,40 +365,91 @@ var columnsNumber = this.getColumnsNumber(); var visibleHeaderWidth = this.header.getVisibleWidth(); - var scrollbarWidth = scrollingDiv.getElement().offsetWidth - scrollingDiv.getElement().clientWidth; + //var scrollbarWidth = scrollingDiv.getElement().offsetWidth - scrollingDiv.getElement().clientWidth; + var scrollbarWidth = this.getScrollbarWidth(); var maxAllowedWidth = mainDivWidth - scrollbarWidth; for (var i=0; i < columnsNumber-1; i++) { if (this.header.isColumnWidthPercentage(i)) { //change percents into pixels - var val = this.header.getColumn(i).width; - val = (val.substr(0, val.length-1)*1)/100; - var width = maxAllowedWidth*val; + var width = this._percentsToPixels(this.header.getColumn(i).width, maxAllowedWidth); this.header.setColumnWidth(i, width); this.setColumnWidth(i, width); } + var headerChild = headerChildren[i]; + Utils.DOM.Event.removeListeners(headerChild); + Utils.DOM.Event.observe(headerChild,'mouseover',this.header.eventHeaderCellMouseOver); + Utils.DOM.Event.observe(headerChild,'mouseout',this.header.eventHeaderCellMouseOut); + var isSortable = headerChild.getAttribute('sortable'); + if ((isSortable) && (isSortable.indexOf('true') == 0)) { + Utils.DOM.Event.observe(headerChild, 'click', this.eventCellClicked); + } } - var excessWidth = this.header.getVisibleWidth() - maxAllowedWidth - 1; - if (excessWidth > 0) { - this.validateColumnsWidth(cols,excessWidth); - }; + //var excessWidth = this.header.getVisibleWidth() - maxAllowedWidth - 1; + //if (excessWidth > 0) { + // this.validateColumnsWidth(cols,excessWidth); + //}; cols[columnsNumber-1].width = null; cols[cols.length-1].width = null; var newHeight = mainDivHeight - header.getHeight() - footerHeight - 2; newHeight -= this.header.getCaptionHeight(); scrollingDiv.setStyle('height:'+ newHeight +'px;'); - for (var i=0; i < columnsNumber-1; i++) { - var headerChild = headerChildren[i]; - Utils.DOM.Event.removeListeners(headerChild); - Utils.DOM.Event.observe(headerChild,'mouseover',this.header.eventHeaderCellMouseOver); - Utils.DOM.Event.observe(headerChild,'mouseout',this.header.eventHeaderCellMouseOut); - var isSortable = headerChild.getAttribute('sortable'); - if ((isSortable) && (isSortable.indexOf('true') == 0)) { - Utils.DOM.Event.observe(headerChild, 'click', this.eventCellClicked); - } - }; header.adjustSeparators(); this.hideSplashScreen(); }, + + /** + * Calculates ratios of column width to total table width. + */ + saveRatios: function() { + LOG.debug('saveRatios'); + var c = this.getColumns(); //table columns + var scrollbarWidth = this.getScrollbarWidth(); //width of the scrollbar + LOG.debug('Scrollbar: ' + scrollbarWidth); + var mainDivWidth = this.mainDiv.getWidth(); //width of the whole div with table + LOG.debug('Main DIV: ' + mainDivWidth); + var maxWidth = mainDivWidth - scrollbarWidth; //max width of the table + LOG.debug('Width to spread: ' + maxWidth); + //generate ratio for each column + for(i = 0;i < c.length - 1;i++) { + var w = c[i].width; + if(this.header.isColumnWidthPercentage(i)) {//width in percents + //convert to pixels + w = this._percentsToPixels(w, maxWidth); + } + this.ratios[i] = w / maxWidth; + LOG.debug('Column[' + i + '] ratio: ' + this.ratios[i]); + } + }, + + calculateWidthsFromRatios: function() { + LOG.debug('firing calculateWidthsFromRatios'); + var c = this.getColumns(); //table columns + var scrollbarWidth = this.getScrollbarWidth(); //width of the scrollbar + LOG.debug('Scrollbar: ' + scrollbarWidth); + var mainDivWidth = this.mainDiv.getWidth(); //width of the whole div with table + LOG.debug('Main DIV: ' + mainDivWidth); + var maxWidth = mainDivWidth - scrollbarWidth; //max width of the table + LOG.debug('Width to spread: ' + maxWidth); + var totalWidth = 0; + //set widths according to each column's width ratio + for(i = 0;i < c.length - 1;i++) { + LOG.debug('Column[' + i + '] ratio: ' + this.ratios[i]); + var w = Math.round(this.ratios[i] * maxWidth); + if(w < parseInt(this.minColumnWidth)) { + w = parseInt(this.minColumnWidth); + } + LOG.debug('setting column ' + i + ' to width: ' + w); + this.setColumnWidth(i, w); + this.header.setColumnWidth(i, w); + totalWidth += w; + } + //Compensate for rounding inaccuracy + if(totalWidth > maxWidth) { + //reduce width of the last column + c[c.length - 2].width -= (totalWidth - maxWidth); + } + }, + update: function(refreshEvents) { this.createControls(); if ( !ClientUILib.isIE ) { @@ -407,6 +465,11 @@ this.selectionManager.refreshEvents(); this.updateLayout(); this.selectionManager.restoreState(); + }, + + _percentsToPixels: function(percents, maxAllowedWidth) { + var val = (percents.substr(0, percents.length-1)*1)/100; + return maxAllowedWidth*val; } }); \ No newline at end of file