Author: pgolawski Date: 2008-11-07 07:58:36 -0500 (Fri, 07 Nov 2008) New Revision: 11055 Modified: trunk/ui/extendedDataTable/src/main/javascript/ClientUI/controls/datatable/ExtendedDataTable.js trunk/ui/extendedDataTable/src/main/javascript/ClientUI/controls/datatable/ExtendedDataTableHeader.js Log: code refactoring fixing table to work without facet='header' for columns/table 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-07 12:57:22 UTC (rev 11054) +++ trunk/ui/extendedDataTable/src/main/javascript/ClientUI/controls/datatable/ExtendedDataTable.js 2008-11-07 12:58:36 UTC (rev 11055) @@ -12,10 +12,6 @@ this.options = options; this.selectionManager = new ExtendedDataTable.SelectionManager(options, this); - if (this.options.sortFunction) { - this.sortFct = this.options.sortFunction; - this.eventCellClicked = this.OnCellMouseClicked.bindAsEventListener(this); - } this.onGroupToggleFct = this.options.onGroupToggleFunction; if (this.options.onColumnResize != null){ this.onColumnResize = this.options.onColumnResize; @@ -36,21 +32,11 @@ }, destroy: function() { - //var rows = this.tableB.rows; - //rowCount = rows.length; - //for(var i = 0; i < rowCount; i++) { - // Utils.DOM.Event.removeListeners(rows[i]); - //} //remove listeners this.selectionManager.removeListeners(); if (this.header) { this.header.removeListeners(); - var headerChildren = this.header.getColumnCells(); - l = headerChildren.length; - for (var i=0; i<l-1; i++) { - Utils.DOM.Event.removeListeners(headerChildren[i]); - }; } if (this.groupRows) { var l = this.groupRows.length; @@ -130,23 +116,9 @@ return el; }, - OnCellMouseClicked: function(event) { - //get column id - var el = this._findParentElement(event, "th"); - var columnId = (el) ? el.id : null; - - if (columnId && (columnId != "")){ - this.showSplashScreen(); - this.sortFct(event, columnId); - } - Event.stop(event); - }, - preSendAjaxRequest: function(){ //remove listeners Event.stopObserving(window, 'resize', this.eventContainerResize); - //Event.stopObserving(document, 'mousemove', this.header.eventSepMouseMove); - //Event.stopObserving(document, 'mouseup', this.header.eventSepMouseUp); //show splash screen this.showSplashScreen(); }, @@ -159,7 +131,7 @@ this.mainDiv.setStyle({display:'none'}); } */ - this.table.setStyle({visibility:'hidden'}); + //this.table.setStyle({visibility:'hidden'}); var splshscr = this.splashScreen; splshscr.className = 'extdt-ss-vsbl'; }, @@ -172,7 +144,7 @@ this.mainDiv.setStyle({display:''}); } */ - this.table.setStyle({visibility:''}); + //this.table.setStyle({visibility:''}); this.splashScreen.className = 'extdt-ss-hdn'; }, @@ -273,6 +245,7 @@ this.fakeIeBodyRow = $(this.id +":body:fakeIeRow"); this.header = new ExtendedDataTable.DataTable.header(this.id +":header",this); this.header.minColumnWidth = this.minColumnWidth; + this.header.addListeners(); var colgroup = $(this.id +":colgroup:body"); this.cols = colgroup.getElementsByTagName("col"); this.columnsNumber = this.cols.length; @@ -377,14 +350,6 @@ 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) { @@ -395,7 +360,9 @@ var newHeight = mainDivHeight - header.getHeight() - footerHeight - 2; newHeight -= this.header.getCaptionHeight(); scrollingDiv.setStyle('height:'+ newHeight +'px;'); + this._redrawTable(table); header.adjustSeparators(); + this._redrawTable(this.tableB); this.saveRatios(); this.hideSplashScreen(); }, @@ -480,6 +447,18 @@ _percentsToPixels: function(percents, maxAllowedWidth) { var val = (percents.substr(0, percents.length-1)*1)/100; return maxAllowedWidth*val; + }, + + _redrawTable: function(table) { + table.hide(); //this is for opera < 9.5 + if (ClientUILib.isSafari){ + var tr = table.insertRow(0); + var td = tr.insertCell(0); + td.setAttribute("colspan", 5); + td.innerHTML = "safari-must-have-something-inserted-to-redraw-table"; + table.deleteRow(tr.rowIndex); + } + table.show(); } }); \ No newline at end of file Modified: trunk/ui/extendedDataTable/src/main/javascript/ClientUI/controls/datatable/ExtendedDataTableHeader.js =================================================================== --- trunk/ui/extendedDataTable/src/main/javascript/ClientUI/controls/datatable/ExtendedDataTableHeader.js 2008-11-07 12:57:22 UTC (rev 11054) +++ trunk/ui/extendedDataTable/src/main/javascript/ClientUI/controls/datatable/ExtendedDataTableHeader.js 2008-11-07 12:58:36 UTC (rev 11055) @@ -16,6 +16,11 @@ this.eventHeaderCellMouseOver = this.OnHeaderCellMouseOver.bindAsEventListener(this); this.eventHeaderCellMouseOut = this.OnHeaderCellMouseOut.bindAsEventListener(this); + if (this.extDt.options.sortFunction) { + this.sortFct = this.extDt.options.sortFunction; + this.eventHeaderCellClicked = this.OnHeaderCellMouseClicked.bindAsEventListener(this); + } + var showMenuFct = this.extDt.options.showMenuFunction; if (showMenuFct) { this.showMenuFct = showMenuFct; @@ -31,7 +36,25 @@ menuDiv.className = "extdt-menu-div-on"; }, - getCaption: function() { + OnHeaderCellMouseOut: function(event) { + var el = this.extDt._findParentElement(event, "th"); + var menuDiv = $(el.id+"header:menuDiv"); + menuDiv.className = "extdt-menu-div-out"; + }, + + OnHeaderCellMouseClicked: function(event) { + //get column id + var el = this.extDt._findParentElement(event, "th"); + var columnId = (el) ? el.id : null; + + if (columnId && (columnId != "")){ + this.extDt.showSplashScreen(); + this.sortFct(event, columnId); + } + Event.stop(event); + }, + + getCaption: function() { return this.caption; }, @@ -44,18 +67,58 @@ } }, - OnHeaderCellMouseOut: function(event) { - var el = this.extDt._findParentElement(event, "th"); - var menuDiv = $(el.id+"header:menuDiv"); - menuDiv.className = "extdt-menu-div-out"; - }, + addListeners: function(){ + var columnCells = this.getColumnCells(); + var l = columnCells.length; + for (var i = 0; i< l-1; i++) { + var headerChild = columnCells[i]; + //remove listeners + Utils.DOM.Event.removeListeners(headerChild); + //add listeners + Utils.DOM.Event.observe(headerChild,'mouseover',this.eventHeaderCellMouseOver); + Utils.DOM.Event.observe(headerChild,'mouseout',this.eventHeaderCellMouseOut); + + var isSortable = headerChild.getAttribute('sortable'); + if ((isSortable) && (isSortable.indexOf('true') == 0)) { + var sortDiv = $(headerChild.id + ":sortDiv"); + if (sortDiv){ + Utils.DOM.Event.observe(sortDiv, 'click', this.eventHeaderCellClicked); + } + } + var headerChildChildren = headerChild.childElements(); + if (headerChildChildren == null || headerChildChildren.size() == 0){ + continue; + } + var sepSpan = headerChildChildren[2]; + var menuImage = headerChildChildren[7]; + //remove listeners + Utils.DOM.Event.removeListeners(menuImage); + Utils.DOM.Event.removeListeners(sepSpan); + //add listeners + Utils.DOM.Event.observe(menuImage,'click',this.menuImageMouseDown); + Utils.DOM.Event.observe(sepSpan, 'click', this.eventSepClick); + Utils.DOM.Event.observe(sepSpan, 'mousedown', this.eventSepMouseDown); + Utils.DOM.Event.observe(sepSpan, 'mousemove', this.eventSepMouseMove); + Utils.DOM.Event.observe(sepSpan, 'mouseup', this.eventSepMouseUp); + } + }, removeListeners: function() { var columnCells = this.getColumnCells(); var l = columnCells.length; for (var i = 0; i< l-1; i++) { var headerChild = columnCells[i]; + Utils.DOM.Event.removeListeners(headerChild); + + var sortDiv = $(headerChild.id + ":sortDiv"); + if (sortDiv){ + Utils.DOM.Event.stopObserving(sortDiv, 'click'); + } + var headerChildChildren = headerChild.childElements(); + if (headerChildChildren == null || headerChildChildren.size() == 0){ + continue; + } var sepSpan = headerChildChildren[2]; var menuImage = headerChildChildren[7]; @@ -72,6 +135,7 @@ } return sum; }, + createControl: function(elementId) { if(!elementId) { errMsg = "Invalid id specified for ExtendedDataTableGridHeader."; @@ -85,8 +149,6 @@ } }, - - parseTemplate: function(template) { if(!template) { return false; @@ -187,11 +249,13 @@ adjustSeparators: function() { var columnCells = this.getColumnCells(); var l = columnCells.length; - this._redrawTable(this.extDt.table.getElement()); for (var i=0; i<l-1; i++) { var headerChild = columnCells[i]; var headerNextChild = columnCells[i+1]; var headerChildChildren = headerChild.childElements(); + if (headerChildChildren == null || headerChildChildren.size() == 0){ + continue; + } var sepSpan = headerChildChildren[2]; var headerRowHeight = this.headerRow.getHeight(); var headerRowY = this.headerRow.getY(); @@ -200,39 +264,18 @@ var dropSpanLeft = headerChildChildren[3]; var dropSpanRight = headerChildChildren[5]; var menuImage = headerChildChildren[7]; - - //remove listeners - Utils.DOM.Event.removeListeners(menuImage); - Utils.DOM.Event.removeListeners(sepSpan); - //add listeners - Utils.DOM.Event.observe(menuImage,'click',this.menuImageMouseDown); - Utils.DOM.Event.observe(sepSpan, 'click', this.eventSepClick); - Utils.DOM.Event.observe(sepSpan, 'mousedown', this.eventSepMouseDown); - Utils.DOM.Event.observe(sepSpan, 'mousemove', this.eventSepMouseMove, true); - Utils.DOM.Event.observe(sepSpan, 'mouseup', this.eventSepMouseUp, true); - var spanLeft = headerNextChild.offsetLeft - sd; - sepSpan.setStyle('height:'+headerRowHeight+'px'); - sepSpan.setStyle('top:'+headerRowY+'px'); - sepSpan.setStyle('left:'+spanLeft+'px'); - menuImage.setStyle('top:' + headerRowY + 'px'); + sepSpan.setStyle({height: headerRowHeight+'px', top: headerRowY+'px', left: spanLeft+'px'}); + menuImage.setStyle({top: headerRowY + 'px', left: (headerNextChild.offsetLeft-menuImage.offsetWidth - 1)+'px'}); //menuImage.setStyle('left:'+(spanLeft-menuImage.offsetWidth)+'px'); - menuImage.setStyle('left:'+(headerNextChild.offsetLeft-menuImage.offsetWidth - 1)+'px'); - dropSpanLeft.setStyle('top:'+headerRowY+'px'); - var w = headerChild.getWidth(); - dropSpanLeft.setStyle('left:'+ (headerChild.offsetLeft) +'px'); - dropSpanLeft.setStyle('height:'+headerRowHeight+'px'); - dropSpanLeft.setStyle('width:'+(w/2)+'px'); - dropSpanRight.setStyle('top:'+headerRowY+'px'); - dropSpanRight.setStyle('left:'+ (headerChild.offsetLeft + w/2) +'px'); - dropSpanRight.setStyle('height:'+headerRowHeight+'px'); - dropSpanRight.setStyle('width:'+(w/2)+'px'); + var w = parseInt(headerChild.getWidth()/2); + dropSpanLeft.setStyle({top: headerRowY+'px', left: (headerChild.offsetLeft) +'px', height: headerRowHeight+'px', width: w+'px'}); + dropSpanRight.setStyle({top: headerRowY+'px', left: (headerChild.offsetLeft + w) +'px', height: headerRowHeight+'px', width: w+'px'}); } this.lastColWidth = this.extDt.getColumnWidth(this.getColumnsNumber()-1); if (ClientUILib.isIE){ this.lastColWidth -= 15; } - this._redrawTable(this.extDt.tableB); }, OnSepClick: function(event) { @@ -318,6 +361,7 @@ } } this._hideSplitter(); + }, OnSepMouseMove: function(event) { @@ -339,14 +383,6 @@ this.columnSplitter.moveToX(finalX); Event.stop(event); } - }, - _redrawTable: function(table) { - table.hide(); //this is for opera < 9.5 - var tr = table.insertRow(0); - var td = tr.insertCell(0); - td.setAttribute("colspan", 5); - td.innerHTML = "safari-must-have-something-inserted-to-redraw-table"; - table.deleteRow(tr.rowIndex); - table.show(); - } + } + }); \ No newline at end of file