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 2006/09/15 02:20:54 UTC
svn commit: r446466 - in /incubator/xap/trunk/src/xap/widgets/dojo:
ScrollPane.js TreeTable.js exampleTable.html
Author: jmargaris
Date: Thu Sep 14 19:20:54 2006
New Revision: 446466
URL: http://svn.apache.org/viewvc?view=rev&rev=446466
Log:
more table work
Added:
incubator/xap/trunk/src/xap/widgets/dojo/ScrollPane.js (with props)
incubator/xap/trunk/src/xap/widgets/dojo/exampleTable.html (with props)
Modified:
incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js
Added: incubator/xap/trunk/src/xap/widgets/dojo/ScrollPane.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/src/xap/widgets/dojo/ScrollPane.js?view=auto&rev=446466
==============================================================================
--- incubator/xap/trunk/src/xap/widgets/dojo/ScrollPane.js (added)
+++ incubator/xap/trunk/src/xap/widgets/dojo/ScrollPane.js Thu Sep 14 19:20:54 2006
@@ -0,0 +1,44 @@
+//IMPORTANT move this to some shared area
+dojo.widget.manager.registerWidgetPackage("xap.widgets.dojo");
+
+Xap.provide("xap.widgets.dojo.ScrollPane");
+
+dojo.require("dojo.widget.*");
+dojo.require("dojo.widget.HtmlWidget");
+
+dojo.widget.tags.addParseTreeHandler("dojo:ScrollPane");
+
+xap.widgets.dojo.ScrollPane = function(){
+ dojo.widget.HtmlWidget.call(this);
+}
+dojo.inherits(xap.widgets.dojo.ScrollPane, dojo.widget.HtmlWidget);
+
+dojo.lang.extend(xap.widgets.dojo.ScrollPane, {
+
+ //setting display:block on a div should work but doesn't.
+ //If you set absolute position on a div then it creates a block in the box
+ //model but then the div is absolute which we don't want.
+ //so we put stuff in a table which DOES define a block in the box model
+ templateString: '<div><div style="overflow:hidden" dojoAttachPoint="headerViewport"></div><div dojoAttachPoint="containerNode" style="overflow:auto" dojoAttachEvent="onscroll"></div>',
+ templateCssPath: null ,
+ widgetType: "ScrollPane",
+ isContainer: true,
+
+ setHeaderRow: function( domNode ){
+ this._headerRow = domNode;
+ this.headerViewport.appendChild(domNode);
+ },
+
+
+ //when we scroll the header row moves left to right, hopefully it is
+ //the right size, we don't enforce that here. Maybe we should adjust the
+ //right instead of left if the header row is too short compared
+ //to the overall data?
+ onscroll: function( event ){
+ if (this._headerRow){
+ this._headerRow.style.left = this.containerNode.scrollLeft;
+ }
+ }
+}
+);
+
Propchange: incubator/xap/trunk/src/xap/widgets/dojo/ScrollPane.js
------------------------------------------------------------------------------
svn:eol-style = native
Modified: incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js?view=diff&rev=446466&r1=446465&r2=446466
==============================================================================
--- incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js (original)
+++ incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js Thu Sep 14 19:20:54 2006
@@ -13,27 +13,32 @@
dojo.require("dojo.style");
dojo.require("dojo.event");
+Xap.require("xap.widgets.dojo.ScrollPane");
+
dojo.widget.tags.addParseTreeHandler("dojo:TreeTable");
dojo.widget.tags.addParseTreeHandler("dojo:TableColumn");
dojo.widget.tags.addParseTreeHandler("dojo:TableRow");
xap.widgets.dojo.TreeTable = function(){
+ alert("create a tree table");
dojo.widget.HtmlWidget.call(this);
this._revalidate();
}
-dojo.inherits(xap.widgets.dojo.TreeTable,dojo.widget.HtmlWidget);
+dojo.inherits(xap.widgets.dojo.TreeTable,xap.widgets.dojo.ScrollPane);
dojo.lang.extend(xap.widgets.dojo.TreeTable, {
- templateString: '<table><colgroup dojoAttachPoint="colgroup"></colgroup><thead dojoAttachPoint="thead"><tr></tr></thead>' +
- '<tbody dojoAttachPoint="tbody"></tbody></table>',
-
+ templateString: '<div>' +
+ '<table dojoAttachPoint="headerTable" style="width:100%;table-layout:fixed"><tbody dojoAttachPoint="headerTbody"><tr dojoAttachPoint="headerRow"></tr></tbody></table>'+
+ '<div dojoAttachPoint="scrollDiv" style="overflow:auto;width:100%;height:100%">' +
+ '<table dojoAttachPoint="table"><tbody dojoAttachPoint="tbody"></tbody></table></div></div>',
templateCssPath: null ,
widgetType: "TreeTable",
isContainer: false,
columns : [],
rows : [],
validatePending : false,
+ sizeAdjustmentPending : false,
_revalidate: function(){
if (!this.validatePending){
@@ -42,46 +47,89 @@
}
},
+ _adjustSizes: function(){
+ if (!this.sizeAdjustmentPending){
+ dojo.lang.setTimeout(this, this._resizeTable, 0);
+ this.sizeAdjustmentPending = true;
+ }
+ },
+
+ _resizeTable: function(){
+// for (var i=0; i<this.columns.length;i++){
+// var headerWidth = this.headerRow.childNodes[i].offsetWidth;
+// alert("Inner width of header = " + this.headerRow.childNodes[i] + "=" + headerWidth);
+// //set the cell on the first row to that width
+// this.tbody.childNodes[0].childNodes[i].style.width = headerWidth;
+// this.headerRow.childNodes[i].style.width = headerWidth;
+// }
+ this.sizeAdjustmentPending = false;
+ },
+
_createTable: function(){
- this._rebuildHead();
- this._rebuildBody();
+ this._rebuildTable();
this.validatePending = false;
+ this._adjustSizes();
},
- _rebuildHead: function(){
- this.domNode.removeChild(this.colgroup);
- this.colgroup = document.createElement("colgroup");
- this.domNode.appendChild(this.colgroup);
- alert("Rubuild head num columns = " + this.columns.length);
+ _rebuildTable: function(){
+ this.domNode.removeChild(this.headerTable);
+ this.domNode.removeChild(this.scrollDiv);
+
+ this.headerTable = document.createElement("table");
+ this.domNode.appendChild(this.headerTable);
+
+
+ this.headerTable.style.width = "100%";
+ this.headerTable.style.tableLayout="fixed";
+
+ this.scrollDiv = document.createElement("div");
+ this.domNode.appendChild(this.scrollDiv);
+
+ this.scrollDiv.style.width="100%";
+ this.scrollDiv.style.height="100%";
+ this.scrollDiv.style.margin.bottom = "-30px";
+ this.scrollDiv.style.overflow="auto";
+
+ this.table = document.createElement("table");
+ this.scrollDiv.appendChild(this.table);
+ this.table.style.tableLayout="fixed";
+
+ //populate cols under both tables
for (var i = 0; i<this.columns.length; i++){
- alert("Rebuild head with column " + this.columns[i]);
- alert("Rebuild head add node:" + this.columns[i].domNode);
- this.colgroup.appendChild(this.columns[i].domNode);
+ var column = this.columns[i];
+ var headerCol = document.createElement("col");
+ this.headerTable.appendChild(headerCol);
+ headerCol.style.width="33%";
+
+ var bodyCol = document.createElement("col");
+ this.table.appendChild(bodyCol);
+ bodyCol.style.width="33%";
}
- this.domNode.removeChild(this.thead);
- this.thead = document.createElement("thead");
- this.domNode.appendChild(this.thead);
- var headerRow = document.createElement("tr");
- this.thead.appendChild(headerRow);
+ this.headerBody = document.createElement("tbody");
+ this.headerTable.appendChild(this.headerBody);
+
+ //now populate the header row
+ this.headerRow = document.createElement("tr");
+ this.headerBody.appendChild(this.headerRow);
for (var i = 0; i<this.columns.length; i++){
- var header = document.createElement("th");
- if (this.columns[i]._header){
- header.appendChild(this.columns[i]._header);
+ var cell = document.createElement("td");
+ this.headerRow.appendChild(cell);
+ if (this.columns[i]._header){
+ cell.appendChild(this.columns[i]._header);
}
- headerRow.appendChild(header);
}
- },
-
- _rebuildBody: function(){
- this.domNode.removeChild(this.tbody);
- this.tbody = document.createElement("tbody");
- this.domNode.appendChild(this.tbody);
+
+ this.bodyBody = document.createElement("tbody");
+ this.table.appendChild(this.bodyBody);
+ //now populate the body rows
for (var i =0; i<this.rows.length; i++){
- this.tbody.appendChild(this.rows[i].domNode);
+ this.bodyBody.appendChild(this.rows[i].domNode);
}
+
+
+
},
-
insertColumn: function(column, index){
@@ -137,6 +185,7 @@
setHeader: function( domNode ){
this._header = domNode;
+// domNode.style.display = "inline";
}
});
Added: incubator/xap/trunk/src/xap/widgets/dojo/exampleTable.html
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/src/xap/widgets/dojo/exampleTable.html?view=auto&rev=446466
==============================================================================
--- incubator/xap/trunk/src/xap/widgets/dojo/exampleTable.html (added)
+++ incubator/xap/trunk/src/xap/widgets/dojo/exampleTable.html Thu Sep 14 19:20:54 2006
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!-- this is a reference for our table implementation,
+seems to work correctly on different browsers if you include
+the doctype above -->
+
+<html>
+<body style="width:100%;height:100%">
+<div style="width:50%;height:50%;position:absolute;background-color:red">
+ <span>Header 1</span><span>Header 2</span><span>Header 3</span>
+ <div style="overflow:scroll;width:100%;height:100%">
+ <table>
+ <tr>
+ <td>Cell111111111111111</td>
+ <td>Cell2222222222222222</td>
+ <td>Cell3333333333333333</td>
+ </tr>
+ <tr>
+ <td>Cell111111111111111</td>
+ <td>Cell2222222222222222</td>
+ <td>Cell3333333333333333</td>
+ </tr>
+
+ <tr>
+ <td>Cell111111111111111</td>
+ <td>Cell2222222222222222</td>
+ <td>Cell3333333333333333</td>
+ </tr>
+
+ <tr>
+ <td>Cell111111111111111</td>
+ <td>Cell2222222222222222</td>
+ <td>Cell3333333333333333</td>
+ </tr>
+ <tr>
+ <td>Cell111111111111111</td>
+ <td>Cell2222222222222222</td>
+ <td>Cell3333333333333333</td>
+ </tr>
+
+
+ </table>
+ </div>
+</div>
+
+
+
+</div>
+</body>
+</html>
+
Propchange: incubator/xap/trunk/src/xap/widgets/dojo/exampleTable.html
------------------------------------------------------------------------------
svn:eol-style = native