<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="generator"
content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
<title>Resize Table</title>
<script type="text/javascript"
src="file:///c:/java/NextApp_Echo2/SourceCode/src/webrender/java/nextapp/echo2/webrender/resource/ClientEngine.js">
</script>
<script type="text/javascript"
src="file:///c:/java/echopointng/projects/jar/src/ui/java/echopointng/ui/resource/js/ep.js">
</script>
<script type="text/javascript"
src="file:///c:/java/echopointng/projects/jar/src/ui/java/echopointng/ui/resource/js/epdrag.js">
</script>
<script type="text/javascript">
var dbgE;
var epTable = null;
dbg = function(str) {
if (! dbgE) {
dbgE = document.getElementById('debug');
}
dbgE.innerHTML = str + '<br/>' + dbgE.innerHTML;
}
EPTableEx = function(elementId) {
this.elementId = elementId;
this.tableE = null;
this.tableHeaderE = null;
EP.ObjectMap.put(elementId, this);
};
EPTableEx.prototype.synchronizeTableColumns = function() {
debugger;
var trElementContent = this.tableE.rows[0];
var trElementHeader = this.tableHeaderE.rows[0];
for (var i = 0; i < trElementContent.cells.length; ++i) {
//var contentCellE = trElementContent.cells[i];
var cellE = this.getColGroupColumn(i);
var contentCellE = this.getContentCell(i);
var headerCellE = this.getHeaderCell(i);
var width = this.getCellWidth(cellE);
this.setCellWidth(headerCellE,width);
}
};
EPTableEx.prototype.getColGroupColumn = function(cellIndex) {
var colgroup = this.tableE.getElementsByTagName('colgroup')[0];
var foundCount = -1;
for (var i = 0; i < colgroup.childNodes.length; i++) {
var col = colgroup.childNodes.item(i);
if (col.tagName && col.tagName.toUpperCase() == 'COL') {
foundCount++;
if (foundCount == cellIndex) {
return col;
}
}
}
return null;
};
EPTableEx.prototype.getContentCell = function(cellIndex) {
var cellE = this.tableE.rows[0].cells[cellIndex];
return cellE;
};
EPTableEx.prototype.getHeaderCell = function(cellIndex) {
var cellE = this.tableHeaderE.rows[0].cells[cellIndex];
return cellE;
};
EPTableEx.prototype.getCellWidth = function(cellElement) {
var width;
if (cellElement.tagName.toUpperCase() == 'TD') {
if (cellElement.style.width) {
width = cellElement.style.width;
} else {
width = EP.getWidth(cellElement);
}
} else if (cellElement.tagName.toUpperCase() == 'COL') {
width = cellElement.getAttribute('width');
}
return parseInt(width,10);
};
EPTableEx.prototype.setCellWidth = function(cellElement, width) {
width = (''+width).indexOf('px') == -1 ? width+'px' : width;
if (cellElement.tagName.toUpperCase() == 'TD') {
return cellElement.style.width = width;
}
if (cellElement.tagName.toUpperCase() == 'COL') {
return cellElement.setAttribute('width',width);
}
};
EPTableEx.prototype.setColumnWidth = function(dragContext, newWidth) {
var index = dragContext.targetCellIndex;
var cellE = this.getColGroupColumn(index);
this.setCellWidth(cellE,newWidth);
// adjust the header cells to match
newWidth = this.getCellWidth(cellE);
// Gecko requires the cell be set noit just the colgroup
cellE = this.getContentCell(index);
this.setCellWidth(cellE,newWidth);
var headerCellE = this.getHeaderCell(index);
this.setCellWidth(headerCellE,newWidth);
};
EPTableEx.prototype.onDragMouseMove = function(echoEvent,dragContext) {
//debugger;
var deltaX = dragContext.eventDeltaX;
var startWidth = dragContext.startWidth;
var newWidth = startWidth;
if (deltaX >= 0) {
// dragging right
newWidth = startWidth + deltaX;
this.setColumnWidth(dragContext,newWidth);
} else {
// dragging left
newWidth = startWidth - Math.abs(deltaX);
if (newWidth < 5) {
newWidth = 5;
}
this.setColumnWidth(dragContext,newWidth);
}
dbg('delta='+deltaX + ' startWidth='+startWidth + ' newWidth='+newWidth);
};
EPTableEx.prototype.onMouseDown = function(echoEvent) {
var dragContext = {};
var resizerE = (echoEvent.target ? echoEvent.target : echoEvent.srcElement);
// which cell are we targettting
var targetCellIndex = resizerE.getAttribute('targetCellIndex');
dragContext.targetCellIndex = targetCellIndex;
dragContext.dragTarget = this.getColGroupColumn(targetCellIndex);
dragContext.startWidth = this.getCellWidth(dragContext.dragTarget);
EP.Drag.startDragOperation(echoEvent,resizerE,this,dragContext);
};
EPTableEx.prototype.onScroll = function(echoEvent) {
var scrollX = this.contentDivE.scrollLeft;
this.headerDivE.scrollLeft = scrollX;
}
EPTableEx.prototype.eventHandler = function(echoEvent) {
dbg('event : ' + echoEvent.type);
if (echoEvent.type == 'mousedown') {
this.onMouseDown(echoEvent);
}
if (echoEvent.type == 'scroll') {
this.onScroll(echoEvent);
}
};
function init() {
debugger;
epTable = new EPTableEx('c_177');
epTable.tableE = document.getElementById('tableContent');
epTable.tableHeaderE = document.getElementById('tableHeader');
epTable.headerDivE = document.getElementById('headerDiv');
epTable.contentDivE = document.getElementById('contentDiv');
EP.Event.addHandler("scroll", epTable.contentDivE, epTable);
var headerE;
headerE = document.getElementById('resizer1');
EP.Event.addHandler("mousedown", headerE, epTable);
headerE = document.getElementById('resizer2');
EP.Event.addHandler("mousedown", headerE, epTable);
// synch the header with the table width
epTable.synchronizeTableColumns();
var testE = document.getElementById('test');
EP.Event.addHandler("click", headerE, epTable);
}
</script>
<style type="text/css">
.tableOuter {
width:500px;
height:200px;
}
.headerDivClass {
width:100%;
background-color:#EBEADB;
overflow : hidden;
}
.contentDivClass {
width:100%;
background-color:#00ff00;
height:200px;
overflow:scroll
}
td.headerCell {
border:1px blue solid;
border-collapse:collapse;
overflow:hidden;
white-space:nowrap;
height:2em;
}
img.headerCellResizer {
cursor: e-resize;
width:7px;
height:20px;
text-align:center;
}
td.cell1 {
border:1px blue solid;
overflow:hidden;
background-color:#DCDCDC;
overflow:hidden;
white-space:nowrap;
}
td.cell2 {
border:1px blue solid;
overflow:hidden;
background-color:#E9967A;
overflow:hidden;
white-space:nowrap;
}
td.cell3 {
border:1px blue solid;
overflow:hidden;
background-color:#FF8C00;
overflow:hidden;
white-space:nowrap;
}
</style>
</head>
<body style="font-family: sans-serif; font-size: 10pt; margin: 0px; padding: 20px;background-color:#acdcbc" onload="init();">
<pre id="debug" style="height:200px;position:absolute;top:0px;left:700px;"></pre>
<div id="test">Test</div>
<div id="c_177" class="tableOuter">
<!-- header div -->
<div id="headerDiv" class="headerDivClass">
<table id="tableHeader" border=0 cellpadding=0 cellspacing=0 style="width:100%;border-collapse:collapse;table-layout: fixed;"><tbody>
<tr>
<td id="header0" class="headerCell">Header 0</td>
<td id="header1" class="headerCell"><img id="resizer1" class="headerCellResizer" src="resizer.gif" targetCellIndex="0"/>Header 1</td>
<td id="header2" class="headerCell"><img id="resizer2" class="headerCellResizer" src="resizer.gif" targetCellIndex="1"/>Header 2</td>
</tr>
</tbody></table>
</div>
<!-- content div -->
<div id="contentDiv" class="contentDivClass">
<table id="tableContent" border=0 cellpadding=0 cellspacing=0 style="table-layout: fixed;width:100%;border-collapse:collapse;">
<colgroup>
<col width="150px" />
<col width="250px" />
<col width="350px" />
</colgroup>
<tbody>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">XXXXX X</td>
<td class="cell2">XXXXX X</td>
<td class="cell3">XXXXX X</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">XXXXX X</td>
<td class="cell2">XXXXX X</td>
<td class="cell3">XXXXX X</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">XXXXX X</td>
<td class="cell2">XXXXX X</td>
<td class="cell3">XXXXX X</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">XXXXX X</td>
<td class="cell2">XXXXX X</td>
<td class="cell3">XXXXX X</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">XXXXX X</td>
<td class="cell2">XXXXX X</td>
<td class="cell3">XXXXX X</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">XXXXX X</td>
<td class="cell2">XXXXX X</td>
<td class="cell3">XXXXX X</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">XXXXX X</td>
<td class="cell2">XXXXX X</td>
<td class="cell3">XXXXX X</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">Column 1</td>
<td class="cell2">Column 2</td>
<td class="cell3">Column 3</td>
</tr>
<tr>
<td class="cell1">XXXXX X</td>
<td class="cell2">XXXXX X</td>
<td class="cell3">XXXXX X</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>